ARIA (Accessible Rich Internet Applications, specifically WAI-ARIA) is a W3C specification for giving HTML elements extra information for assistive technologies such as screen readers. It defines roles, states and properties. ARIA changes what is announced to assistive technology, but it does not add behavior. Keyboard handling and focus management remain the developer’s job.
At a glance
- Publisher
- W3C (Web Accessibility Initiative)
- Connects
- HTML elements with assistive technologies through roles, states and properties
- Version
- WAI-ARIA 1.2
- Status
- W3C Recommendation of 2023-06-06
- Specification
- WAI-ARIA 1.2
Last checked:
What does ARIA include?
A role says what an element is, such as role="progressbar". States describe a current condition, for example aria-checked or aria-expanded. Properties describe characteristics, such as aria-label or aria-describedby.
The WAI-ARIA specification says ARIA is a supplement to native semantics and not a replacement. When the host language provides a feature with equivalent accessibility, use that feature. ARIA is mainly useful for custom JavaScript widgets such as tabs, menus and dialogs.
What is aria-label for?
aria-label supplies an accessible name for an element when no visible text exists or the existing name is inaccurate. A typical case is a button that shows only an icon. If visible label text exists, MDN recommends aria-labelledby, which takes precedence when both are present. The attribute overrides native names such as alt or a <label>. It is not supported on some roles, for example generic, paragraph and presentation. Because the text is hidden from sighted users, important information should also be visible.
Example
<button aria-label="Close">
<svg aria-hidden="true" focusable="false" width="17" height="17">
<path d="..." />
</svg>
</button>
The icon is hidden from assistive technology. The button’s accessible name is “Close”.
ARIA and AI agents
ARIA values feed into the browser’s accessibility tree. That tree is also used outside screen readers: Playwright MCP from Microsoft reads pages through it instead of through screenshots, according to its project description. Labeled controls with correct roles are therefore easier for such tools to interpret (assessment).
Common mistakes
- Using ARIA instead of a native element. The specification treats ARIA as a supplement to native semantics. When HTML provides an equivalent feature, use the HTML element.
aria-hidden="true"on focusable elements. MDN warns against it, including on ancestors of focusable elements, because the attribute is inherited by children.aria-hiddenon top ofdisplay: noneorhidden. Such elements are already removed from the accessibility tree, so the attribute is redundant.- Hiding visible content with
aria-hidden. MDN advises it only when equivalent content stays available to assistive technology.
FAQ
What is the difference between a label and an aria-label?
A <label> is visible text tied to a form field. aria-label gives a name that only assistive technology uses.
Is aria-label the same as alt text?
No. Alt text describes an image. aria-label names any supported element and overrides native names when both exist.
When should you not use ARIA? When a native HTML element already provides the semantics and behavior.
Sources
- aria-label – MDN Web Docsdeveloper.mozilla.org
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 – W3Cw3.org
- ARIA6: Using aria-label to provide labels for objects – W3C WCAG 2.2 Techniquesw3.org
- Playwright MCP – GitHub (Microsoft)github.com
- aria-hidden – MDN Web Docsdeveloper.mozilla.org
Last updated: