ARIA (Accessible Rich Internet Applications) is a W3C specification of attributes such as role, aria-label and aria-expanded that expose a widget's purpose and state to assistive technologies when native HTML cannot express it.
Why it matters
Custom components like tab panels, menus and dialogs have no built-in meaning, so a screen reader hears only a pile of divs. ARIA fills that gap. The first rule of ARIA is to prefer a native element, such as <button>, when one exists, because ARIA changes only what is announced, not how the element behaves. Test with a real screen reader at least occasionally, because automated checkers cannot judge whether the announcements make sense.
Example
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>
Scripts must flip aria-expanded to true when the menu opens, or users hear stale information.
Common mistakes
- Adding
roleattributes without implementing keyboard support. - Using
aria-labelto hide poor visible text or contradict it. - Leaving ARIA states unchanged when the UI changes.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.