ARIA Attribute Reference

A searchable reference to WAI-ARIA 1.2: about 90 roles grouped by category (widget, composite widget, document structure, landmark, live region, window and the abstract roles) and about 50 states and properties with their value types and defaults. Each entry explains what it does, which roles use it, what the native HTML equivalent is and gives a short correct example. Everything is built into the page, so it works offline.

Accessibility Runs in your browser

Search WAI-ARIA Roles, States and Properties

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

How to Use the ARIA Attribute Reference

Type part of a role or attribute name, or a word from its purpose, into the search box.
Use the category buttons to narrow the list. Each button shows whether it is on, and you can switch it off again.
Open an entry to read its description, required and supported attributes, the native alternative and an example.
Use the Show list to see only roles or only states and properties.

About This Tool

Front-end developers, designers and testers who need a quick answer about the right role or attribute, and who want to follow the first rule of ARIA: use native HTML when you can.

Input: Search text · Output: Reference entries.

Features and Limitations

Features

More than 90 roles including the abstract roles, and about 50 states and properties from WAI-ARIA 1.2 (plus five ARIA 1.3 draft attributes, labelled as such).
Value types, allowed values and default values for every attribute.
Required and supported attributes per role, and the roles that support each attribute.
“First rule of ARIA” advice with the native HTML equivalent where one exists.
Real buttons for filters, real details elements for entries, and the whole data set is embedded.

Limitations

This is a quick reference, not a copy of the specification. Always check the official WAI-ARIA 1.2 text and the ARIA Authoring Practices Guide for complete behaviour.
Browser and screen-reader support differs between roles; a role that exists in the specification may not be announced the same way everywhere.
Digital publishing (doc-*) and graphics (graphics-*) module roles are not included.
Descriptions are paraphrased summaries written for this tool.
Results are computed in your browser; nothing you enter is sent to a server.

Example

Searching “expanded” lists aria-expanded (value type: true/false/undefined, default undefined), the roles that support it such as button, combobox and treeitem, and an example of a disclosure button that toggles it.

Frequently Asked Questions

What is the first rule of ARIA?

If you can use a native HTML element or attribute with the semantics and behaviour you need already built in, do so instead of adding ARIA. A button element is better than a div with role="button", because the native one already handles focus and keyboard use.

Does ARIA change how an element behaves?

No. ARIA changes only what assistive technology is told about an element. You still have to supply keyboard handling, focus management and visual styling yourself.

What is the difference between a state and a property?

States (such as aria-checked or aria-expanded) are expected to change as the user interacts. Properties (such as aria-label or aria-controls) change less often. In practice you set both as attributes.

Why are some roles marked abstract?

Abstract roles such as widget, landmark and range exist to organise the role taxonomy. They must never be used in content; use a concrete role like slider or navigation.

Where do the descriptions come from?

They are short summaries written for this tool from the WAI-ARIA 1.2 specification (a W3C Recommendation). The official text lives at https://www.w3.org/TR/wai-aria-1.2/. No request is made to that address from this page.