What ARIA is
ARIA (Accessible Rich Internet Applications) is a set of attributes that tell screen readers what an element is and what state it is in, when native HTML semantics are missing.
Three kinds of attributes
- Roles declare what an element is, like role tab or role dialog.
- Properties describe relationships and labels, like aria labelledby or aria describedby.
- States describe current condition, like aria expanded or aria checked, and update as the user interacts.
The first rule of ARIA
Prefer native HTML. A real button or input carries roles, states, and keyboard behavior for free. Reach for ARIA only when building a custom widget that has no native equivalent.
Common mistakes
- Adding a role but forgetting the keyboard behavior it implies.
- Leaving states stale so a collapsed menu still reads as expanded.
- Overriding native semantics with a redundant or wrong role.
Key idea
ARIA roles, properties, and states expose custom widgets to assistive tech, but native HTML first because it provides semantics and keyboard support automatically.