WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Robert Fentress
Date: Apr 12, 2016 12:21PM

As I understand it, the problem with icon-only font icons (as opposed to
icons with visible text beside them) is that providing alternative text as
hidden text does not deal with users who are not blind, but who replace
their fonts for improved readability. For instance, a dyslexic user may
replace the fonts on a page with OpenDyslexic. There are also other,
non-accessibility-related reasons why someone may not be downloading and
using the web fonts associated with those font icons. Another thing I
noticed is that if you provide the alternative text using aria-label, it is
not voiced on iOS (or wasn't last time I checked), so you should be aware
of that.

The Filament Group has guidance on how to do accessible font icons that
seems to work in my testing:
https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

But, really, SVG icons are probably the best:
http://blog.cloudfour.com/seriously-dont-use-icon-fonts/

Is there a reason why you can't use those?

Hope that helps!

Best,
Rob

On Tue, Apr 12, 2016 at 1:02 PM, James A. < <EMAIL REMOVED> > wrote:

> Regarding icon-fonts, I am also currently looking for accessibility
> techniques to make these both accessible and more usable for a project
> using the open source Font-Awesome library. So far I have identified the
> following possible approaches and would appreciate anybody's experience for
> this!
>
> 1. for a purely decorative icon then use aria-hidden=true
> 2. if a text description is required then use aria-hidden in combination
> with off-screen text (e.g. bootstrap's sr-only class) to provide a text
> equivalent
>
> As per these use cases http://ryanfrederick.com/sandbox/d8/icon-test/
>
> However that does aid those who may need assistance with understanding
> what an icon means. So I am also exploring using a keyboard accessible
> pop-up in combination with aria-described by tags to improve usability and
> accessibility - the approach currently used on many of the buttons on
> Facebook and Twitter. I have still to look for a solution for accessing
> these pop-s up or equivalent help information for touch devices.
>
> Any thoughts or experiences on these approaches would be gratefully
> appreciated!
>
> Best wishes
>
> Abi James
> Accessibility Team, WAIS, ECS
> University of Southampton, UK
> Web: https://access.ecs.soton.ac.uk/
>
>
>