Re: How do assistive technologies handle icon fonts?

I found this a good read:
http://blog.cloudfour.com/seriously-dont-use-icon-fonts/

On Tue, Dec 1, 2015 at 2:56 PM, <deborah.kaplan@suberic.net> wrote:

> 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
>
>
>