Recipe: ARIA attributes cheat-sheet
A compact reference for the most common ARIA attributes used in accessible React components.
Landmarks
| Role | Usage |
|---|
| banner | <header> site-wide |
| navigation | <nav> primary links |
| main | <main> unique content |
| contentinfo | <footer> site-wide |
Live regions
| Attribute | Value |
|---|
| aria-live | polite | assertive |
| aria-atomic | true | false |
| aria-relevant | additions removals text all |
Widget states
| Attribute | Purpose |
|---|
| aria-expanded | Collapsible toggle state |
| aria-pressed | Toggle button state |
| aria-selected | Tab / option selection |
| aria-disabled | Interactive element disabled |
Relationships
| Attribute | Links |
|---|
| aria-labelledby | ID of label element |
| aria-describedby | ID of description element |
| aria-controls | ID of controlled region |
| aria-owns | ID of owned child |
Prefer native HTML semantics over ARIA when possible. Use these only when building custom widgets.