Accessible Graphical Buttons in HTML

Picture of a push button.
Picture by flickr user chrisinplymouth.

With a recent project, I have been working again in HTML trying to make semantic and accessible mark-up for interfaces. One common type of user interface control is a graphical button, which has no text for a label.

My first thought and trial was just to include alt-text with the image that serves as the button like so:

<button type="button">
<img src="email.png" alt="E-mail" />
</button>

Here is an example:

This is short and semantically correct. In my first test, it worked just fine as the screen reader I was using read the alt-text of the image. It turns out that VoiceOver on iOS 6 did not do so well with this code—all it read was: “Button”

A Better Way

After doing a little bit of research, I found the recent article Making Accessible Icon Buttons by Nicholas C. Zakas. He suggested using the aria-label attribute on the button, which provides more reliable accessibility with different screen reader setups. So, this is better code to use for graphical buttons:

<button type="button" aria-label="E-mail">
<img src="email.png" alt="E-mail" />
</button>

Here is an example:

This works fine in VoiceOver. I was a little wary about double-labeling elements in case both sets of text are read. However, no screen reader I have tested double-reads “E-mail” from both the alt-text and aria-label.


About J. Bern Jordan

Bern is a Ph.D. candidate and researcher in accessibility, usability, user interface, and technology interested in extending usability to all people, including people with disabilities and those who are aging. He currently works at the Trace R&D Center in Biomedical Engineering at the University of Wisconsin-Madison.

Leave a Reply

Your email address will not be published. Required fields are marked *