`role` attribute

The role attribute describes an element's purpose to assistive technologies. It can help custom interfaces, but it should not replace the semantics and behavior already provided by native HTML.

What you will learn

What information role communicates
Why native HTML should be the first choice
What else a custom interactive control must implement

What does `role` do?

A role is a hint about what an element represents, such as navigation, a button, or a status message. It affects the accessibility tree; it does not automatically change how an element looks or behaves.

Landmark roles on generic elements

<div role="banner">Site header</div>
<div role="navigation" aria-label="Primary">...</div>
<div role="main">Page content</div>

Prefer native HTML

Use header, nav, main, aside, and footer when they express the structure. Use button for a button and a for a link. These elements already provide semantics, keyboard behavior, and browser integration.

Avoid redundant roles

<!-- Unnecessary: button already has the button role -->
<button role="button" type="button">Save</button>

<!-- Prefer this -->
<button type="button">Save</button>

Custom controls need more than a role

Adding role="button" to a div does not make it clickable with a keyboard. You must provide focus management, keyboard handling, visible state, and an accessible name. A native button is usually simpler and safer.

A custom control checklist

<div role="button" tabindex="0" aria-label="Open menu">
  Menu
</div>

// JavaScript must also handle Enter and Space.
// Prefer <button type="button"> when possible.

Helpful guidelines

Do not use a role that conflicts with the element's native meaning.
Do not use ARIA to hide a control's missing keyboard or focus behavior.
Test custom widgets with keyboard navigation and the screen readers your users rely on.

role attribute