How do assistive technologies handle Font Awesome?

This document lists different options to make icon fonts—delivered by Font Awesome on this page—accessible. It also lists the limitations of those options. Because these are just examples; all links are internal (they don't go anywhere).

Test one: aria-hidden on the icon

We can hide the icon from assistive technologies (AT for short) by adding aria-hidden. This will however not convey the meaning—or any other information it carries—to users of AT.

Example

The link in this example has an icon of a bed before the text "Book a hotel". The icon is however hidden for AT with aria-hidden.

Book a hotel

<a href="#book-hotel"><span class="fa fa-bed" aria-hidden="true"></span> Book a hotel</a>

Results

AT, Browser, OS Test Result Expected Result Actual Result Caret navigation
VoiceOver, Safari 9, OS X 10.10 Pass Icon is not spoken Icon is not spoken Icon is read as new line
VoiceOver, Yandex 15, OS X 10.9 Pass Icon is not spoken Icon is not spoken -
VoiceOver Braille display, Yandex 15, OS X 10.9 Pass Icon is not rendered Icon is not rendered -
VoiceOver, Safari, iOS 9 Pass Icon is not spoken Icon is not spoken Icon is not spoken
JAWS 16, IE 11, Windows 7 Pass Icon is not spoken Icon is not spoken Icon is not spoken

Issues

Test two: visually hidden text and aria-hidden on the icon

Besides hiding the icon from AT, we can also provide visually hidden text that describes the icon or conveys its meaning. This example uses the popular sr-only class to mark an elment as for screen readers only".

Example

The link in this example shows the GitHub logo without text. The icon is hidden for AT with aria-hidden and there is alternative text provided via the sr-only class.

GitHub 

<a href="#github">
  <span class="fa fa-github" aria-hidden="true"></span>
  <span class="sr-only">GitHub</span>
</a>

Results

AT, Browser, OS Test Result Expected Result Actual Result Caret navigation
VoiceOver, Safari 9, OS X 10.10 Buggy Alternative text is spoken, but icon is not. Alternative text is spoken, but icon is not. Icon is read as new line, followed by the visually hidden text
VoiceOver, Safari, iOS 9 Pass Alternative text is spoken, but icon is not. Alternative text is spoken, but icon is not. Alternative text is spelled, but icon is not.
JAWS 16, IE 11, Windows 7 Pass Alternative text is spoken, but icon is not. Alternative text is spoken, but icon is not. Alternative text is spelled, but icon is not.

Issues

Test three: aria-label on the icon

We can provide alternative text for the icon to AT by adding aria-label.

Example

The link in this example has an icon of a book followed by the word "shop". The icon has an aria-label with a value of "book" to communicate "book shop" to AT.

shop

<a href="#book-shop"><span class="fa fa-book" aria-label="book"></span> shop</a>

Results

AT, Browser, OS Test Result Expected Result Actual Result Caret navigation
VoiceOver, Safari 9, OS X 10.10 Fail Link is read as Book shop Link is read as Book shop Icon is read as new line
VoiceOver, Safari, iOS 9 Pass Link is read as Book shop Link is read as Book shop Icon is spelled as b-o-o-k
JAWS 16, IE 11, Windows 7 Fail Link is read as Book shop Link is read as a space, then shop Icon is spelled as two spaces
JAWS 16, FF 42, Windows 7 Fail Link is read as Book shop Link is read as shop Icon is spelled as two spaces

Issues

Test four: aria-label and role=img on the icon

We can add alternative text via aria-label, but as Joanie explained this won't influence the icon node type—which is still a text node; this causes issues because it allows for AT caret navigation (navigate text per character). We can work around this by adding role="img"; this turn the text node into a graphical node and thus disabled caret navigation.

Example

The icon in the next paragraph shows a heart, but it replaces the word "love" in the sentence. If we follow the alternative text guidelines for informative images we should use a literal description:

In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information.

Every cool web project is made with these days. (And so is this one).

<span class="fa fa-heart" role="img" aria-label="love"></span>

Results

AT, Browser, OS Test Result Expected Result Actual Result Caret navigation
VoiceOver, Safari 9, OS X 10.10 Pass Icon is spoken as love, image Icon is spoken as love, image Icon is spoken as love, image
VoiceOver, Safari, iOS 9 Pass Icon is spoken as love, image Icon is spoken as love, image Icon is spelled as l-o-v-e
Orca 3.18, Firefox 42.0, Ubuntu 14.04 Pass Icon is spoken as love, image Icon is spoken as love image Icon is spelled as l-o-v-e image
JAWS 16, Firefox 42.0, Windows 7 Pass Icon is spoken as graphic, love Icon is spoken as graphic love Icon is spelled as l-o-v-e
JAWS 16, IE 11, Windows 7 Fail Icon is spoken as graphic, love Icon is not spoken and sentence broken up into 2 lines Icon is spelled as two spaces
NVDA, IE 11, Windows 7 Pass Icon is spoken as graphic, love Icon is spoken as graphic love Icon is spelled as graphic l-o-v-e
NVDA, Firefox 42.0, Windows 7 Pass Icon is spoken as graphic, love Icon is spoken as graphic love Icon is spelled as graphic l-o-v-e

Issues