WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons in Safari

for

From: Patrick H. Lauke
Date: Feb 19, 2016 9:14AM

On 19/02/2016 16:08, Joseph Sherman wrote:
> We are now using font icons for header and footer image links (like logos, twitter, facebook, etc). Since they are not images, they do not any ALT. They do have Titles. On Windows and iOS, they work fine- JAWS and NVDA read the Title and link. On Mac and Android, VoiceOver/Talkback only says "link", and does not read the Title or url so the user has no idea what the link is for.
>
> Is this a VoiceOver bug? Is there an attribute like ALT for font icons?

Not tested, but I suspect this is more to do with verbosity settings.

More fundamentally though, I'd suggest moving away from font icons:

- https://speakerdeck.com/ninjanails/death-to-icon-fonts
- http://blog.cloudfour.com/seriously-dont-use-icon-fonts/

Consider using SVG instead.

If you *must* still use font icons, I'd suggest making the actual
element that hosts the font icon invisible to assistive tech (using
aria-hidden="true") and adding visually hidden, yet accessible, HTML
text. See for instance the accessibility callout on
http://getbootstrap.com/components/#glyphicons-how-to-use and the
approaches shown in the "Examples" that follow.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke