WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: deborah.kaplan
Date: Apr 13, 2016 2:19PM

Icon fonts can be quite useful, but the problem is that some designers get too wrapped up in how cool it is to create unique, wordless page controls for everything. Testing with real users shows that there is a very small number of universal icons. I believe most people seem to figure out shopping carts; "search" from magnifying glasses (although not if there's no accompanying search box!); "help" from question marks; "settings" from a gear; and a couple of others. But in user tests, there are a very small number of icons that people pick up naturally. Interesting side note--as of the last usability test I saw from about six months ago, people STILL don't understand hamburger menus. And those are ubiquitous; if they are still not widely understood, that gives some sense of how difficult it is for users to pick up new symbology.


People learn the icons for applications they use all the time, and not even all of those. I'm in github every day, and have been for years. But I'll be damned if I can remember what this three different type of squiggly line icon fonts stand for when I I am on one of the page views where the icon labels are obscured. There's not many websites that people use so ubiquitously that you can know they have a reasonable chance of eventually learning unique symbols, and that pool will vary by user base: Facebook, Gmail, Twitter, Github. Unless we are writing the kind of social media tools which are going to dominate people's communication, or workplace productivity tools that will dominate a person's daily workflow, we can't expect to be able to train our users.

Confession: we've got some icon fonts at work on the product I helped write, and I have to expand out the menu to get at the words every single time, because for the life of me I can't figure out which of these adorable little symbols means "Materials organized by topic." Is that because our designers failed? No, of course not--it's because the wider world hasn't developed a symbology to mean "materials organized by topic." There's no standard convention in the language of 10 x 10 images.

Now, this obviously isn't a problem inherent in the technology of icon fonts. It's a problem of design--the tendency of minimal design to remove color contrast and borders from usable controls, and to take textual labels away or hide them behind expandable menus. It's just that the ease of making these design choices with icon fonts seems to have increased the tendency of designers to use them as a universal panacea.

By all means, use the technology. Just use it sensibly. Even the best ARIA will only help the screen reader users; the rest of your users still won't know what the icons mean without help.

Deborah Kaplan

On Wed, 13 Apr 2016, Caitlin Geier wrote:

> 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).
>
> On Tue, Apr 12, 2016 at 4:35 PM, Lucy Greco < <EMAIL REMOVED> > wrote:
>
>> mike thats ausom
>>
>> Lucia Greco
>> Web Accessibility Evangelist
>> IST - Architecture, Platforms, and Integration
>> University of California, Berkeley
>> (510) 289-6008 skype: lucia1-greco
>> http://webaccess.berkeley.edu
>> Follow me on twitter @accessaces
>>
>>
>> On Tue, Apr 12, 2016 at 1:32 PM, Moore,Michael (Accessibility) (HHSC) <
>> <EMAIL REMOVED> > wrote:
>>
>> > "Mouse grid, 7, 3, 5, 9, ... click that" </sarcasm>
>> >
>> > Mike Moore
>> > Accessibility Coordinator
>> > Texas Health and Human Services Commission
>> > Civil Rights Office
>> > (512) 438-3431 (Office)
>> >
>> >