WAI-ARIA reference

ARIA Role Reference

Look up any ARIA role in seconds. Each entry shows its purpose, the native HTML element to prefer, key attributes, required structure, keyboard behavior and an example to copy.

Search roles or attributes

First rule of ARIA: if a native HTML element already has the semantics and behavior you need, use it instead of adding a role. ARIA changes what assistive technology announces; it does not add keyboard support or behavior.

Runs entirely in your browser. Nothing is uploaded to any server.

Why use an ARIA reference

Pick the right role

Choosing the wrong role confuses screen reader users more than having no role at all.

Know what is required

Some roles need specific attributes, parents or children to work correctly.

Prefer native HTML

Each entry points you to the native element that gives you semantics and behavior for free.

Understanding ARIA role categories

Landmark roles mark the major regions of a page so screen reader users can jump between them. Widget roles describe interactive controls such as buttons, sliders and tabs, while composite roles are containers that manage focus among their children, such as listbox, menu and grid. Document structure roles describe non-interactive content like headings, lists and tables.

Live region roles announce dynamic updates without moving focus, and window roles describe dialogs. Remember that adding a role only changes what assistive technology announces: you still need to add keyboard support, focus management and state updates yourself, which is why native HTML elements are usually the better choice.

Required attributes

Marked "(required)" where the ARIA 1.2 specification requires them.

Required structure

"Must be inside" and "Contains" list the parent and child roles a role depends on.

Keyboard

Expected key handling based on the ARIA Authoring Practices Guide.

ARIA role reference FAQ

Should I add role="button" to a div?

Only if you cannot use a real <button>. A div with role="button" also needs tabindex="0" and Enter and Space key handlers to behave like a button.

Is role="navigation" needed on <nav>?

No. The nav element already has the navigation role, so adding it is redundant.

What is the difference between presentation and none?

They are synonyms that remove an element's implicit role. none was added because presentation was often misunderstood.

Which version of ARIA does this cover?

The roles and requirements are based on WAI-ARIA 1.2 and the ARIA Authoring Practices Guide.

Does this list abstract roles?

No. Abstract roles such as widget or landmark are used only inside the specification and must never be used in markup.