WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Joseph Sherman
Date: Apr 13, 2016 11:51AM

I read that guide, but it's not correct. In the section on "If an icon represents an interactive element", it relies on the Title attribute to provide an accessible alternative name for the element. In my testing, the screen reader just says "link" and does not read the Title when: using JAWS and the "H" key; or having NVDA or JAWS list the elements; or when on a Mac using VoiceOver.



Joseph



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Caitlin Geier
Sent: Wednesday, April 13, 2016 12:56 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Font Icons and Pseudo-elements



FontAwesome (one of the most popular icon font libraries) just released a guide for using icon fonts accessibly - http://fontawesome.io/accessibility/



I find icon fonts to be quite useful - they're easy to implement and manage, and you don't have to have a designer slaving away to create custom images / icons to represent something. That being said, it's often better to just use text. In the application I'm working on, we mostly use them as decoration (aria-hidden=true).