FontAwesome is well, awesome. Over time they’ve made several efforts to improve the accessibility of their icons, but their current implementation falls short in a couple ways. In this short tutorial, we’ll fix those issues and give you more accessible icons.
The biggest accessibility issue facing FontAwesome is their use of non-semantic markup. Look at any of their icons, and you’ll see this block of code:
<i class="fa fa-address-book" aria-hidden="true"></i>
<i> tag is a big problem for a couple reasons. If you’re familiar with older HTML, you’ll recognize the
<i> tag to mean italics. Since the icons are not meant to be displayed in italics, this makes no semantic sense. Furthermore, the
<i> tag has been replaced with
<em>, so you shouldn’t even be seeing the tag in modern documents. That logic is likely why FontAwesome uses the
<i> tag, but it still needs to be replaced.
The fix is simple – replace the
<i> tags with
<span>s. Using the previous example, your new icon, should look like this:
<span class="fa fa-address-book" aria-hidden="true"></span>
Improving ARIA use
Now that we’ve fixed the semantic issues, let’s move on to FontAwesome’s well-intentioned, but flawed attempt at using ARIA. In the examples above, you’ll notice the element tagged with “aria-hidden”. This prevents screen readers from acknowledging the element, so they just skip over it. See the problem? If your overall element is relying on the icon, like a social media link, it gets completely ignored by a screen reader. Even worse, if your overall element is just a link (anchor) tag with the icon inside, the link is read by screen readers as a blank element.
Again, the fix is relatively simple:
<a href="[url]"><span class="hidden">Facebook</span><span class="fa fa-facebook" aria-hidden="true"></span></a>
By adding an extra span, with your hidden class applied, screen readers can now read the link properly.
Both of these techniques are minor changes, but they make a big difference in making more accessible icons. You may still run into HTML validation issues with the empty spans. If so, just add a comment block like so:
<!-- ICON -->, and you should be all set.
Need help making your site more accessible? Contact us today for an accessibility audit!