How do assistive technologies handle Font Awesome?
This document lists different options to SVG icons—SVGs supplied 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).
Note 1: Internet Explorer is giving SVGs a tab index. We have not set the "focusable" attribute to "no", but doing so would stop this behaviour.
Note 2: tests done with NVDA are using the latest version as of this testing date, 28 December 2015.
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.
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.
Note: NVDA on Firefox, when reading by line, first "Link", then has a newline, then announces "link Github".
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.
* Aria-label is not announced except by NVDA on IE. However trying to spell in that combination dropped the tester out of the link and moved on to the next or prevoius line. "Book graphic link shop" was only heard while tabbing to the anchor.
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.
Icon is used as a replacement for the words: internet explorer. Here, the title is referenced from within a <use> tag using xlink:href to reference it.
nothing announced (except the plain text "Download")
no characters (from SVG)
JAWS 16, Firefox 43, Windows 7
Fail
Download Internet Explorer
"link number void" (the contents of the href string)
no characters
JAWS 16, IE 11, Windows 7
Fail
Download Internet Explorer
nothing announced, makes 2 tab stops
no characters
NVDA (latest), IE 11, Windows 7
Fail
Download Internet Explorer
"Download graphic graphic dot", announces "graphic graphic" when tabbing
no characters
NVDA (latest), Firefox 43, Windows 7
Fail
Download Internet Explorer
"Download dot" (that is, the SVG being there makes NVDA see the . as a loose character)
no characters
Issues
While IE seems to recognise the focusable inside the SVG, nobody reads the imported title text that should be inside.
If VoiceOver does not mention anything, suggest a test with the same SVG anchor element but then with manual <title> element directly inside.
Test seven: use direct title tag in icon
Here we use a direct <title> tag in the SVG. With this tag in the SVG we could additionally add an id to the title and reference the SVG itself to the title using aria-labelledby (which we do not do here) as described by Léonie Watson.
Example
Icon is used as a replacement for the words: internet explorer.
nothing announced (except the plain text "is awesome")
no characters (from SVG)
JAWS 16, Firefox 43, Windows 7
Fail
graphic Internet Explorer is awesome
nothing announced
no characters
JAWS 16, IE 11, Windows 7
Pass
graphic Internet Explorer is awesome
"graphic internet explorer"
i-n-t-e-r-n-e-t e-x-p-l-o-r-e-r
NVDA (latest), IE 11, Windows 7
Buggy
Internet Explorer is awesome
"graphic internet explorer graphic internet explorer", announces "graphic graphic" when tabbing
i-n-t-e-r-n-e-t e-x-p-l-o-r-e-r but twice
NVDA (latest), Firefox 43, Windows 7
Fail
Internet Explorer is awesome
nothing announced
no characters
Issues
I need to run through these again after a fresh reboot, but looks like NVDA's double-announcement is still a problem (it acts as if there are nested graphics: when you go character by character you come out of graphic twice as well), and nobody else is announcing (maybe JAWS+IE)...