I work as a Theminator (that’s my official title) at the ever-awesome Automattic, the company behind WordPress.com and many other fine web products. I wrangle themes for WordPress.com, making them the best they can be and ensuring everyone can find a theme they love. I’m an accessibility evangelist who loves the open web and open source code. I contribute to the WordPress Accessibility Team and the Underscores Theme.
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.
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>
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.
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.
titleattribute 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
- 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!
We can fix this, and easily.
- Links should always have link text.
- Adding a
screen-reader-textclass 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.