Re: How do assistive technologies handle icon fonts?

Four things to be careful about:


A. Dictation users also can't dictate the name of the icon font, if they're actionable. Also, if they're clickable, make sure to make them keyboard focusable! The percentage of clickable icon fonts (on the web in the wild) which can't receive keyboard focus approaches 100%.

> On 30/11/2015 21:37, Michiel Bijl wrote:
>
> 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.

This can provide a solution for the dictation problem: make that hidden name appear in pop-up when the element receives focus or hover. Then voice users know the full name and can dictate it.

(Many sites put the accessible name in the title attribute, which gives this functionality to those voice users with some mousing ability. The above trick would expand the functionality to those who can't access the title attribute.)

B. So ideally, add text labels to the icons! Users love to know where they are going, and you should help them use your site and perforce give you their clicks or their money.

http://www.nngroup.com/articles/icon-usability/


C. Be wary of what icons people recognize *without* text labels. Mostly they can see:

1. Magnifying glasses for search (more difficult if there's no search box: <http://www.nngroup.com/articles/magnifying-glass-icon/>)
2. Shopping carts
3. Question marks for help
4. Gears for settings, sometimes.
5. Little house for home.
6. Printer.
7. Little head for user profile, sometimes.

They rarely recognize others, even the becoming ubiquitous hamburger menu, and have trouble with hearts and stars because they're used inconsistently. And anything your site invents will not be understood.

http://www.nngroup.com/articles/classifying-icons/

Remember you can usability test your icons along with your site.

D. Check your contrast! Icon fonts are popular among fans of minimalist web design, and the percentage of clickable icon fonts which violate contrast rules also approaches 100%.

Deborah Kaplan

Received on Tuesday, 1 December 2015 03:57:34 UTC