Developer Tools
ARIA Role & Landmark Reference - Accessibility Attribute Guide
Browse all 50+ WAI-ARIA roles with descriptions and HTML examples. Filter by category (Landmark, Widget, Document) or search by name to find the right role for accessible UI.
54 roles
Text size:
What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes defined by the W3C that communicate semantic meaning to assistive technologies like screen readers. ARIA fills the gap where native HTML elements lack sufficient semantic information.
ARIA roles reference
| Role category | Examples | Purpose |
|---|---|---|
| Landmark | banner, navigation, main, contentinfo | Page regions for screen reader navigation |
| Widget | button, slider, tab, combobox | Interactive UI controls |
| Document structure | heading, list, table, img | Content organization |
| Live region | alert, status, log, timer | Dynamic content updates |
The ARIA golden rule
Use native HTML elements whenever possible. ARIA's first rule is: don't use ARIA if a native
HTML element or attribute already provides the needed semantic. A <button>
is always better than <div role="button">.
ARIA states and properties
Beyond roles, ARIA provides two categories of attributes:
- States (dynamic, can change):
aria-checked,aria-disabled,aria-expanded,aria-selected,aria-hidden,aria-pressed. - Properties (stable, describe characteristics):
aria-label,aria-labelledby,aria-describedby,aria-required,aria-live,aria-controls,aria-owns.
Common ARIA patterns
| Pattern | Key roles/attributes | Notes |
|---|---|---|
| Modal dialog | role="dialog", aria-modal="true", aria-labelledby | Focus must be trapped inside the dialog while open |
| Tab panel | role="tablist", role="tab", role="tabpanel", aria-selected | Arrow keys navigate between tabs |
| Accordion | aria-expanded on the trigger button | Content panel is conditionally rendered or hidden |
| Live alert | role="alert" | Screen readers announce content immediately; use sparingly |
| Status message | role="status", aria-live="polite" | Announces after current speech completes |
| Combobox | role="combobox", aria-autocomplete, aria-expanded | Complex pattern; follow ARIA 1.2 authoring practices carefully |
| Tooltip | role="tooltip", aria-describedby | Must be keyboard-accessible; shown on focus, not just hover |
Testing ARIA
- Screen readers: Test with NVDA + Firefox (Windows), VoiceOver + Safari (macOS/iOS), and TalkBack (Android). Each has quirks; testing across platforms is important.
- Automated tools: axe DevTools browser extension catches ~30–40% of accessibility issues automatically. Google Lighthouse also includes an accessibility audit.
- Keyboard navigation: Tab through your entire interface without a mouse. Every interactive element must be reachable and operable by keyboard alone.