The Web Accessibility Initiative Accessible Rich Internet Applications specification (WAI-ARIA) is a powerful tool to make the Web more accessible for people using screen readers. Unfortunately many developers use WAI-ARIA incorrectly. This post will focus on the aria-label attribute. It will provide examples of the misuse of aria-label found during accessibility audits. A better, corrected example follows each incorrect usage. Note that the examples may omit some attributes to make the code easier to read.
Finally, this post does not describe aria-label in detail. If you need a refresher please refer to Léonie Watson’s post, Short note on aria-label, aria-labelledby, and aria-describedby. It is also important to remember that an aria-label attribute on an element will take precedence over any existing label for that element.
Image Buttons
When using an image with a button, the alt text should describe the action, not the image. Use correct alt text on the image or use null alt text and an aria-label on the button. See the Nic Steenhout’s Knowbility blog post, An Alt Text Primer for a refresher on proper alt text.
Incorrect Example
<button aria-label="press the arrow button to move forward"><img src="next-arrow.png" alt="right pointing arrow" ></button>
JAWS recording of incorrect button:
Transcript:
press the arrow button to move forward, button
This has too much detail. There is no need to identify this as a button, the screen reader will do that. The user doesn’t need to be told to press the button. The image of the arrow does not need a description. Because there is an aria-label on the button element the alt text for the enclosed image will not be spoken.
Corrected Examples
Use the alt text for the image as the label. Simply provide the action the button will perform rather than instructions. In this case the action is Next.
<button><img src="next-arrow.png" alt="Next" ></button>
You could also use an aria-label on the button element and an empty alt attribute on the image instead of alt text. Ideally, add visble text to the button image to aid any users with cognitive impairments.
<button aria-label="Next"><img src="next-with-text.png" alt ></button>
JAWS recording of corrected button:
Transcript:
next, button
Text Fields
When a text field is required, use the required attribute. Do not use the label to identify a field as required.
Incorrect Example
*
<label for="fullName" >Full Name </label>*
<input type="text" id="fullName" aria-label="Full name field is required">
JAWS recording of incorrect text field:
Transcript:
full name field is required, edit, type of text
While this gives the user the information, it is not correct. The label element already provides the properly associated label, Full Name. There is no need to identify this as a field. The screen reader will announce this as an edit field and also as required when coded correctly.
Corrected example
Let the label element do its job. Add the required attribute to the input element. There is no need for an aria-label. Bonus, add the autocomplete attribute to meet the new 2.1 level AA success criterion 1.3.5 Identify Input Purpose. If autocomplete is turned on in your browser, JAWS will also announce, “has popup” for the text field. This gives the user all of the information needed in a consistent format.
*
<label for="fullName2" >Full Name</label>*
<input type="text" id="fullName2" autocomplete="name" required>
JAWS recording of corrected text field:
Transcript:
full name edit, required, invalid entry, has popup, type of text
Text Links
In most cases well written visible text describes the destination and aria-label is not needed.
Incorrect Example
<a aria-label="Social Link" href="https://facebook.com/my-awesome-company">Friend us on Facebook</a>
JAWS recording of incorrect link text:
Transcript:
social link, link
The aria-label differs from the visible link text. The screen reader will speak the aria-label rather than the visible text. In this example the aria-label, social link, does not provide the destination of the link.
Corrected Examples
Remove the aria-label on the anchor element. The visible link text is enough unless the aria-label provides additional, needed details.
<a href="https://facebook.com/knowbility">Friend us on Facebook</a>
JAWS will speak, “Friend us on Facebook, link,” when tabbing to this link.
Image Links
When using images for links, don’t provide a label for the anchor element and alt text for the image. Use one or the other to identify the link destination.
Incorrect Example
<a aria-label="Social Image" href="https://facebook.com/accessibility" ><img src="facebookLogo.png" alt="Friend us on Facebook”></a>
JAWS will speak, “social image, link” when tabbing to this link.
This example has a label on the anchor element and alt text on the image. The label on the anchor element will override the alt text on the enclosed image. The aria-label does not describe the destination of the link.
Corrected Examples
Remove the aria-label on the anchor element. The screen reader will speak the image alt text.
<a href="https://facebook.com/knowbility" ><img src="facebookLogo.png" alt="Friend us on Facebook”></a>
You could also use an appropriate aria-label on the anchor element and the empty alt attribute on the image. The screen reader will speak the aria-label.
<a aria-label="Friend us on Facebook" href="https://facebook.com/knowbility" ><img src="facebookLogo.png" alt></a>
JAWS will speak, “Friend us on Facebook,” for both of these links.
Conclusion
These are real examples with identifying details removed. Make sure you understand the correct usage before sprinkling your code with WAI-ARIA. Learning the proper use of aria-label will make your code less cluttered, less verbose, and more understandable.
