W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2015

Re: How do assistive technologies handle icon fonts?

From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Mon, 30 Nov 2015 22:50:36 +0000
To: Michiel Bijl <michiel@agosto.nl>, Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org>
Cc: Ja Eun Ku <jku@illinois.edu>
Message-ID: <565CD2BC.8030504@splintered.co.uk>
On 30/11/2015 21:37, Michiel Bijl wrote:
> Jemma and I are doing some accessibility testing on icon
> fonts—especially Font Awesome—and how assistive technologies handle
> them. I’ve setup a GitHub repository called Font Awesome
> <https://github.com/MichielBijl/font-awesome> (because we initially
> targeted that specific library; should rename it). I’ve already added
> one test example and some test results, but suggestions for more
> examples (ways to fix the issue of icon fonts being announced weird), or
> test results for existing tests, or even tips on how to display test
> results properly; it’s all welcome!

Generally, icon fonts can pose problems even for users without any 
specific assistive technologies - such as users with dyslexia who have 
specified their own custom fonts - see 
https://www.youtube.com/watch?v=9xXBYcWgCHA / 
https://speakerdeck.com/ninjanails/death-to-icon-fonts and 
http://blog.cloudfour.com/seriously-dont-use-icon-fonts/

However, if you must use them, and you're only concerned in the first 
instance with screen reader users, a fairly well supported (though 
verbose) technique is to hide the element with the icon itself with 
aria-hidden="true" and to have a visually hidden, yet accessible, 
additional element with actual text description where needed. See the 
"Accessible icons" advice and following examples in 
http://getbootstrap.com/components/#glyphicons-how-to-use for instance.

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
Received on Monday, 30 November 2015 22:51:00 UTC

This archive was generated by hypermail 2.3.1 : Monday, 30 November 2015 22:51:00 UTC