Creating More Accessible Icons with FontAwesome

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.

Semantic Markup

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>

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