Roles, states, and attributes for common ARIA patterns.
A quick reference for building accessible composite widgets. Always prefer a native HTML element first; use ARIA only where native semantics fall short.
Tabs
A set of layered sections of content, one visible at a time.
role="tablist"role="tab"role="tabpanel"
- aria-selected
- On the active tab, set to true; all others false.
- aria-controls
- On each tab, references the id of its tabpanel.
- tabindex
- 0 on the active tab, -1 on inactive tabs for roving focus.
Dialog (modal)
A window that overlays the page and requires user interaction before returning.
role="dialog"
- aria-modal
- Set to true so assistive technology treats content outside as inert.
- aria-labelledby
- References the id of the dialog's visible heading.
Disclosure (accordion)
A button that reveals or hides a section of content.
- aria-expanded
- On the trigger button, true when the panel is visible.
- aria-controls
- On the trigger button, references the id of the panel.
Menu button
A button that opens a menu of actions or links.
role="menu"role="menuitem"
- aria-haspopup
- Set to true or menu on the button.
- aria-expanded
- On the button, true when the menu is open.
Combobox
An input paired with a listbox of suggestions or a picker.
role="combobox"role="listbox"role="option"
- aria-expanded
- On the input, true when the listbox is open.
- aria-controls
- On the input, references the id of the listbox.
- aria-activedescendant
- On the input, references the id of the highlighted option.
Alert
A brief, important message announced automatically without moving focus.
role="alert"
- aria-live
- role="alert" implies assertive; no extra attribute needed.
Progress indicator
A visual and programmatic indicator of task completion.
role="progressbar"
- aria-valuenow
- The current value.
- aria-valuemin / aria-valuemax
- The range boundaries, typically 0 and 100.
Breadcrumb
A trail of links showing the current page's location in a site hierarchy.
- aria-label
- On the containing nav, set to "Breadcrumb".
- aria-current
- On the final link, set to "page".