ARIA in HTML

ARIA attributes communicate roles, names, states, and relationships to assistive technologies when native HTML alone cannot express the interface.

Start with native HTML

Use an element that already has the required meaning and keyboard behavior whenever one exists. A real button is usually better than a div with role="button".

<button type="button">Open settings</button>

<!-- Only use a custom role when a native element cannot express the pattern. -->
<div role="button" tabindex="0">Custom control</div>

The custom example also needs complete keyboard behavior and state management. Adding a role does not turn a div into a fully working button.

Names and states

<button type="button" aria-label="Close dialog">×</button>
<button type="button" aria-expanded="false" aria-controls="details">
  Show details
</button>
<section id="details" hidden>More information</section>

aria-label can provide an accessible name when visible text is not available. A disclosure control should keep aria-expanded synchronized with what the user can see; JavaScript must update both the state and the content.

Common mistakes

• Adding ARIA where a native element already provides the correct semantics.
• Using aria-label to hide a visible label instead of associating the label correctly.
• Setting a state such as aria-expanded once and never updating it.
• Giving an element a role that does not match its actual behavior.