ARIA Roles Reference

How to use

1. 1Type a role name, purpose word, or aria-* property in the search box. The catalog filters live as you type.
2. 2Click a category filter (Landmark, Widget, Document structure, Live region, Window, or Abstract) to narrow the catalog to one family of roles.
3. 3Click a role card in the grid below to load its detail panel: required states, native HTML mappings, parent role, supported aria-* properties, and a copy-ready example.
4. 4Use Copy role to grab the bare identifier, Copy role= to grab the role attribute string, or Copy example to grab the full HTML snippet.
5. 5Watch the Implicit on HTML row: if a native element produces the role for free, prefer that element over a role attribute on a generic div or span.

About this tool

ARIA Roles Reference is a searchable, copy-ready catalog of every author-facing role defined in the WAI-ARIA 1.2 specification. Each role card shows the role identifier exactly as it appears in the role attribute, a one-line purpose, a longer guidance note covering common misuses and browser behavior, the native HTML elements that already imply the role (so you can follow the First Rule of ARIA Use and prefer the native element), any required parent role for nesting, the states and properties that must be set when using the role, other commonly used aria-* attributes, and a short HTML usage example you can copy directly into your code. Roles are grouped by the categories the spec uses: landmark roles for top-level page regions like main and navigation; widget roles for interactive controls like button, checkbox, listbox, slider, and tab; document structure roles for non-interactive content like article, list, heading, and table; live region roles for status messages and alerts; the dialog window role; and the abstract roles that exist only to organize the taxonomy and must never be written by hand. Search matches role names, purpose summaries, required and supported aria-* properties, parent role names, and category labels, so queries like aria-expanded, landmark, listbox, or dialog all find the right cards. Copy buttons hand you the role identifier, the full role attribute string, or the HTML example. Everything ships at build time and runs entirely in your browser, with no upload, no signup, and no external lookups. Useful when writing custom widgets that need correct keyboard and screen reader semantics, when reviewing pull requests that touch accessibility, when auditing a page with the browser accessibility inspector, or when learning ARIA without bouncing between tabs to the W3C spec.

Free to use. Works in your browser. No signup, no login.