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.