Making icon-only buttons a little more accessible

Based on things I’ve seen in the wild lately, it’s time for another quick reminder to not just focus on sighted users. In this particular case, we’re going to focus on the use of icons-only buttons. Now, a lot can be said about the usability of only relying on a symbol to convey meaning, but let’s just focus on the accessibility part for today.

Not everyone relies on sight

In a lot of cases spotted in the wild, this is what might accompany an input field in a form.

Using the icon set Font Awesome, this should result in a button element with a magnifying glass icon. Most sighted users will recognize this as a button to perform a search. Assistive technologies like VoiceOver for Mac OS X, on the other hand, would read this out in the following manner:

“Button”

That’s it. Not very informative, is it? If you’ve got several buttons performing different functions, your user is out of luck.

Doing it properly

All you have to do is add a descriptive text to you <button> element, like so:

Now, assistive technologies can provide the user with more sensible information. VoiceOver will report the following:

“Search, button”

So simple, yet so informative. All VoiceOver does is read out the contents of the button elements, plus report the kind of element, and now the user can safely act up this. Awesome! We’re done here.

But I don’t want that text on my button!

If the case may be that the design does not allow for text to be visible, some developers might jump on the chance to do this:

Whereas the .hide class in your CSS does this:

.hide {
  display: none;
}

Avoid this! What happens is that the styled element gets removed from the DOM altogether, meaning that it will not be visible, nor will assistive technologies detect them. What you need is something that only hides the text visually, still allowing assistive technologies to find them.

.hide-text {
  height: 1px;
  left: -900em;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

And apply this similarly to the above markup example:

Now you’ve got something that is only showing an icon for sighted users, but allows assistive technologies to access the information hidden within. All it took was a little consideration and a few lines of code.

Code samples are available at this CodePen, should wish to fork it and play around with it yourself. I highly recommend that try it out with a screen reader, should you have one available. If you are a front end developer working with the web, you really should.

Close Menu