WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Awesome Icon Accessibility Help

for

From: Birkir R. Gunnarsson
Date: Aug 1, 2017 7:51AM

If the font is used on a focusable element (such as a link or a
button) make sure that element has an accessible name (place on the
focusable element, not on the fon awesome element).

Use eiher the title or aria-label attribute
e.g.
<button aria-label="search"><I class="fa fa-search"></I></button>
(the class name may not be 100% accurate, I don't have Font Awesome
open at the moment).

Make sur theaccessible name describes the action performed by the
control, not what it looks like.
For instance
<button aria-label="cross"><I class="fa fa-close"></I></button
is bad,, he accessible name should be "Close".
and if it is a right arrow link to continue, the accessible name
should be "continue", not "right arrow".

If you are using icons to communicate information, if you provide the
inforamiton in text also you don't have to do anything
Say you have an error icon, but you start all yor error messages with
the word "Error! " you are fine

If you do not, you need to assign the element with the font awesome
class as an image and give tit a text alterantive using ARIA:
<I role="img" aria-label="Error!" class="fa fa-error"></i>
(this works pretty well across browsers/a.t. combinations).

Make sure, if you identify a control visually only with an icon, that
the icon is not obscure or unclear, sometimes a text label is better.
The heart icon, e.g. means "like" on FAcebook but "add to favorites"
on may retail
website.

In this situation you should use a text label so users know what they
are about to do.
This is more of a usability concern than accessibility.
In general, try to standardize the way you use icons on your website
and also standardize the text alternatives so they are consistent.

And, yes, the font replacement is a problem, though not covered
directly by WCAG, it could be a usability issue. SVG is the long-term
solution, but just make sure you have as much info available in text
as possible and don't get too carried away by the awesomeness of icons
(they are pretty cool and they are useful io many users)





On 8/1/17, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> On 01/08/2017 13:56, Jim Homme wrote:
>> Hi,
>> I am learning to work with Font Awesom icons as part of web development
>> training. I want to learn to make them accessible now so I won't have to
>> re-learn them correctly. Hope this makes sense. Can anyone please point me
>> to information aboutmaking these accessible?
>
>
> While not perfect, the information on
> http://fontawesome.io/accessibility/ might start you off in the right
> direction. This is cribbed in part from the accessibility advice on
> http://getbootstrap.com/components/#glyphicons-how-to-use (different
> icon font system, same idea behind it though).
>
> Of course there are gaps here - particularly when it comes to users who
> may have their own font preferences set that override author-defined
> fonts. Moving to SVG-based icon solutions is the more robust approach
> here in most cases.
>
> 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
> > > > >


--
Work hard. Have fun. Make history.