
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.