The Visual-only icon problem

This is something I’ve been seeing a lot lately, and it’s got to stop.

This illustrates the use of icon only controls. In this case, using an icon font. (Similar problems show up using any form of icon-only control, however!) Now, there’s nothing fundamentally wrong with icon fonts; but there’s often a problem with how they’re used. In this particular case, these are two links, used to toggle a particular preference. You can tab to them and activate them from the keyboard, which is great.

However, other than experimentation, there’s no way to know what they are. As a sighted user, you can guess, but without sight, there’s absolutely nothing you can do. The underlying code includes no text at all, of any kind. No title attribute, no hidden text, nothing.

And this is extremely common with the use of icon fonts — they’re implemented with no alternative text.

The alt attribute only applies to media resources, such as an img tag — but that doesn’t mean that only those resources need alternative text! Every form of graphic needs to communicate what it stands for; and icon fonts may not be implemented through an image, but they’re still a graphic. You still need to consider whether a given icon is functional, communicative, or ornamental and provide alternative text on that basis.

How to provide alternative text for an icon font

There’s a good article that provides a lot of detail on making icon fonts accessible: Bulletproof Accessible Icon Fonts by Zach Leatherman, so for a thorough look at the topic, go there. But in brief:

1. Hide the font character itself using aria-hidden='true'
2. If the icon needs text, supplement with a hidden text alternative <span class='screen-reader-text'>Toggle Grid Mode<span> or make the text visible, and the icon supplemental.

I’m not concerned particularly with the overall question of cross-browser support for icon fonts; but I’m certainly concerned about whether the meaning of the icon is conveyed to the end user.

What about sighted users?

So, understanding what these icons mean can sometimes be difficult to pin down. You can see the icon, but what does it mean? For a sighted user, having some form of hover-activated text can be useful – such as what’s provided by a title attribute.

Now, generally, I have a lot of arguments against the title attribute – and they still apply. The title attribute has the major disadvantage that it may or may not be read by a screen reader. As such, it’s not a good substitute for having screen-reader-hidden text. But, because it might be read, it could end up as duplication if you do both. But since it’s an attribute, not an element, it can’t be hidden to screen readers using aria-hidden.

So, the ideal (in my opinion) is to implement some form of JavaScript or CSS (Cascading Style Sheets)-driven tooltip, making the screen-reader-hidden text visible on `:hover` and `:focus` – with support for touch events – and giving all groups of users access to that information.

In Summary

Font icons are awesome. They’re easy, flexible, scale nicely, load quickly (as long as you’re not going crazy with them) — but they need some support to have alternative text. Please, take that extra step to provide it!

See also: Accessible SVG (Scalable Vector Graphics) icons