ARIA Reference
Searchable list of common ARIA roles, properties and states.
| Kind | Name | Description | Example |
|---|---|---|---|
| Role | banner |
Site-wide header. Usually maps to <header>. | <header role="banner"> |
| Role | main |
Primary document content. | <main role="main"> |
| Role | navigation |
Major navigation links. | <nav role="navigation"> |
| Role | complementary |
Supporting content (sidebar). | <aside role="complementary"> |
| Role | contentinfo |
Page footer with copyright, contact, etc. | <footer role="contentinfo"> |
| Role | search |
Search landmark. | <form role="search"> |
| Role | region |
Generic landmark; requires aria-label. | <section role="region" aria-label="Stats"> |
| Role | button |
Acts as a button. Use real <button> when possible. | <div role="button" tabindex="0"> |
| Role | tab |
One of a set of tabs. | <div role="tab" aria-selected="true"> |
| Role | tabpanel |
Content for a tab. | <div role="tabpanel"> |
| Role | dialog |
Modal dialog. | <div role="dialog" aria-modal="true"> |
| Role | alert |
Time-sensitive assertive message. | <div role="alert"> |
| Role | status |
Polite live region. | <div role="status"> |
| Role | tooltip |
Contextual help on hover/focus. | <div role="tooltip"> |
| Role | menu |
Top-level menu of items. | <ul role="menu"> |
| Role | menuitem |
Single command in a menu. | <li role="menuitem"> |
| Role | switch |
Two-state on/off control. | <button role="switch" aria-checked="true"> |
| Property | aria-label |
Accessible name when no visible label is available. | aria-label="Close dialog" |
| Property | aria-labelledby |
ID of the element labelling this one. | aria-labelledby="dialog-title" |
| Property | aria-describedby |
ID of element giving extra description. | aria-describedby="hint" |
| Property | aria-controls |
ID(s) of elements this one controls. | aria-controls="panel-1" |
| Property | aria-haspopup |
Indicates a popup will appear. | aria-haspopup="menu" |
| Property | aria-live |
Live region update behaviour. | aria-live="polite" |
| Property | aria-atomic |
Re-read entire region on change. | aria-atomic="true" |
| State | aria-expanded |
Whether collapsible content is shown. | aria-expanded="true" |
| State | aria-selected |
Selection state of a tab/option. | aria-selected="true" |
| State | aria-checked |
Tri-state checkbox/switch. | aria-checked="mixed" |
| State | aria-disabled |
Element is perceivable but disabled. | aria-disabled="true" |
| State | aria-hidden |
Hide from assistive tech. | aria-hidden="true" |
| State | aria-pressed |
Toggle button pressed state. | aria-pressed="true" |
| State | aria-current |
Current item within a set. | aria-current="page" |
| State | aria-busy |
Loading / waiting. | aria-busy="true" |
About this tool
Browse landmark and widget roles, accessibility properties and dynamic states with one-line examples. Curated subset of WAI-ARIA 1.2.