Icon Font Text Alternatives: Don’t Forget Them

In a world where we need to support screens of all sizes and resolutions and be as future-friendly as possible, many a designer and developer have turned to icon fonts.

They’re awesome! And certainly come in handy, especially depending on what browsers you support and whether or not you can use SVGs. It’s important to remember when using them, you need to think about accessibility.

The Problem

I see icon fonts without text alternatives all the time in my accessibility testing. If you’re using an icon font for a purpose beyond just decoration, and it conveys content, you need a text alternative.


<ul>
    <li class="icon-twitter">
      <a href="http://twitter.com/myprofile" title="Twitter"></a>
    </li>
</ul>

Often, the li will have use :before and have some CSS attached to it displaying the icon font. Many designers and developers then rejoice as lovely icons look, well lovely, at any size on any screen.

But.

This is a link. It has no link text. We’ve essentially done what’s equal to putting an image inside of a link without an alternative text attribute.

  • The link uses only icon fonts inside the <a>, but icon fonts are not announced by screen readers.
  • The title attribute may be intended for screen readers, but it’s not announced by default by screen readers either, and it’s really only useful for users with a mouse. See this post for more info on the title attribute.
  • When a screen reader announces these links, it says: “Link”, which isn’t descriptive and doesn’t tell the user what the link does or where it goes.

Bummer. But wait!

The Solution

We can fix this, and easily.

  • Links should always have link text.
  • Adding a screen-reader-text class that would be hidden off-screen, maintains the design of having the icon only, but provides a text alternative.

The markup might look like this:


<ul>
    <li class="icon-twitter">
      <a href="http://twitter.com/myprofile">
        <span class="screen-reader-text">Follow me on Twitter</span></a>
    </li>
</ul>

Now, a screen reader user hears what that link is for and where it goes. It says: “Link: Follow me on Twitter.” They just might follow you on Twitter too!

It’s easy to forget small, but important details like this, but also easy to fix.

Other Helpful Blog Posts

Read more posts