WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a technical specification for HTML attributes.
It’s used to apply semantics to elements that cannot be defined with HTML alone, which helps assistive technologies (AT) work predictably. In other words, when native HTML can’t explain what an element does, WAI-ARIA — or ARIA, for short — fills in.
The aria-label attribute is especially important for AT users. An ARIA label provides the text label for a button, navigation landmark, or another interactive object. In this article, we’ll explain how ARIA labels can be used to improve web accessibility and provide some tips for using the aria-label attribute appropriately.
First, a quick word of caution: ARIA is a useful tool for improving accessibility, but misusing ARIA can actually make your page less accessible. If you’re using ARIA labels, we strongly recommend working with an accessibility partner and testing your content with screen readers and other AT.
What does a ARIA label do to improve accessibility?
In digital accessibility terminology, an accessible name is information that can be used to identify an element. It’s exposed in the website’s accessibility tree, and it’s important for screen readers and other AT: Without accessible names, users may have trouble navigating or operating your website.
In most cases, your content will have an accessible name that is created by the text content of its wrapping element. For example, let’s say you include a picture of a red apple with descriptive alternative text:
<img src=”/images/redapple.jpg" alt=”a red apple" />
In this case, the alt text (“a red apple") would function as the accessible name for the image. ARIA labels can also provide accessible names for interactive elements and give them meaning.
Related: How Accessible Names Can Help (Or Frustrate) Your Users
When are ARIA labels necessary?
You do not need ARIA labels for every single element on your web page. In fact, the first rule of ARIA is to avoid using it — native HTML is a better choice for defining semantics and improving accessibility.
However, you may need another way to label an interactive element for several reasons:
- You might not want to include a visible label. For example, a search bar might have a magnifying glass icon; visual users would understand the purpose of the search bar, and adding the text “Search" to the field might be undesirable.
- HTML may not have a default accessible name that accurately describes the element.
- In some cases, you may want to reference a label located in another element. In this case, you'd use aria-labeleedby rather than aria-label.
Related: 4 Mistakes to Avoid When using ARIA Roles
What does WCAG say about ARIA labels?
WCAG doesn’t require that websites use ARIA, but the guidelines do require accessible names for elements in success criterion 4.1.2, “Name, Role, Value:”
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
The aria-label and aria-labelledby attributes can be used to fulfill this requirement.
But rather than worrying too much about WCAG conformance, we recommend thinking about the user. Accurate labels help people browse your website with speech recognition software. Screen readers will be able to describe the purpose and function of buttons, form fields, and other important elements.
You want your content to work for as many people as possible; ARIA labels may help you achieve that goal.
Related: 5 Tips for Using ARIA to Improve Web Accessibility
Avoid common mistakes with ARIA labels
Once again, if you’re using ARIA, we recommend working with an accessibility partner. Certain misused ARIA roles can break your website for AT users, and while a bad ARIA label is unlikely to have that sort of impact, you need to test your website carefully to ensure the best possible experience for your users.
A few quick tips:
- If there’s visible text that labels the element, don’t use aria-label. Use aria-labelledby instead.
- If you’re using aria-labelledby, double-check your work — make sure you’re referencing an ID value that actually exists in the DOM.
- If user interface components include text or images of text, their accessible names (which may be ARIA labels) must include the text that is presented visually. Learn more about accessible names for input elements.
- Provide labels that give users enough information to understand the essence of the element. The label should be concise.
- Don’t confuse aria-labelledby with aria-describedby. The aria-describedby attribute may include more details than a label. To learn more, read MDN Web Docs' page on aria-describedby.
For additional guidance, send us a message to connect with an accessibility expert.
