I recently helped do some testing on the new version Yahoo! Mail for iPads and was stumped by an aria-label not working as expected. It was one of those gotcha moments, when you realize a confusion with a fundamental process. Are you wondering why your aria-label is not being announced?
It’s tempting to use the aria-label attribute in situations where the visible text is not adequate. For instance, you may use a background image to represent a value and you’d like the user to know that value via an aria-label on the parent.
This basic test page will walk through the simple assumption and show how the aria-label is meant to be used.
Base configuration
- basic link
<a href="/" aria-label="this basic link has an aria label attribute" >basic link</a> - basic span
<span aria-label="this basic span has an aria label attribute">basic span</span> - basic bold
<b aria-label="this basic b has an aria label attribute">basic bold</b>
Give <span> and <b> tabindex="0" to place into tab flow
Span and b tags are not in the native tab flow. I added tabindex="0" to see if that was the problem. Now that we can give them focus, the aria-label is still ignored.
- basic span
<span aria-label="this basic span has an aria label attribute" tabindex="0">basic span</span> - basic bold
<b aria-label="this basic b has an aria label attribute" tabindex="0">basic bold</b>
What’s going wrong
ARIA is a tool to make our web sites more accessible. It’s meant to restore semantic structure and act as a bridge between dynamic web sites and assistive technology. ARIA roles, states, and values allow the web developer to give directions to assistive technology to explain how an element should be treated. This is especially true when the element is expected to work in a non-standard method. For instance, Flickr uses divs with background images as images to improve animation on mobile devices.
The aria-label attribute allows us to place a label on these elements that have been re-purposed via JavaScript. It’s not meant to replace the title attribute on generic tags.
Convert elements with aria
The following elements now have ARIA roles: button, img, and slider. These ARIA roles announce the new purpose of these elements. Their aria-label attributes are announced, as they are adding information to these faux-elements.
- basic link
<a href="/" aria-label="this link is now a button" role="button">basic link</a> - basic span
<span aria-label="this span is now treated as an image." role="img" class="fakeimg" tabindex="0">basic span</span> - basic bold
<b aria-label="this b is now treated as a radio button" role="radio" tabindex="0">basic bold</b>
Back to the original problem
In the forecast example, the original idea was to put aria-label on the span that included the text “Sat”, “Sun”, or “Mon”. The aria-label described the weather illustrated in the icon. After realizing this was not working, we realized it was being over-thought. The icons were background images, we just needed to add the desired text to the background image container.
ARIA is a great way to solve problems. However, it wasn’t meant to replace basic HTML. Here’s a proposed solution sans ARIA:
<th scope="row" title="Saturday">Sat</th> <td class="cloudy"><span class="visuallyhidden">Cloudy</span></td>
Leave a Reply