ARIA Reference

Overview

The ARIA Reference is a searchable index of the WAI-ARIA roles, states, and properties that browsers and assistive technologies actually implement. Each entry shows the name, the category (role, state, property), what it applies to, and a short description of when to use it — without diving into the full W3C spec.

It is the lookup developers and accessibility specialists reach for when answering questions like which ARIA role for a tab panel or how to use aria-expanded on a disclosure button. Useful while building custom widgets, reviewing pull requests for accessibility regressions, or studying for accessibility certifications.

How it works

The list is sourced from the WAI-ARIA recommendation, which defines a fixed vocabulary of roles (landmark, widget, document structure, live region), states (dynamic — aria-checked, aria-expanded), and properties (static — aria-label, aria-controls). Each role has a defined set of supported states and required parent or child roles.

The reference groups entries by category, lets you filter by name or description text, and highlights which entries are deprecated or have known browser-support gaps. The First Rule of ARIA still applies: if a native HTML element exists for what you need, prefer it.

Examples

• Searching for tab returns role="tab", role="tablist", and role="tabpanel" with the required parent/child relationships.
• Looking up aria-live shows the three possible values (off, polite, assertive) and what each signals to screen readers.
• Filtering by category Landmark lists banner, navigation, main, complementary, contentinfo, and search.
• Searching for expanded jumps to aria-expanded, used on buttons that toggle a disclosure region.

FAQ

Is this the same as the W3C spec?

It's a developer-friendly summary, not the full normative spec. For edge cases and exact algorithms, always cross-reference the WAI-ARIA recommendation.

Should I always add ARIA to my markup?

No. Native semantic HTML (<button>, <nav>, <details>) is preferred. ARIA is for filling gaps where no native element fits — custom comboboxes, tablists, tree views.

What's the difference between a state and a property?

States change over time (a tab can become selected); properties are essentially static for the element's lifetime (aria-label rarely changes). Both are technically attributes on the DOM.

Why are some entries marked deprecated?

Roles like directory were dropped in later ARIA versions because authoring intent overlapped with list. Use the suggested replacement.

Try ARIA Reference