Skip to content

The 5 rules of ARIA

Published on in Accessibility

Last updated on

Five simple rules for using ARIA attributes, straight from W3C.

W3C's Using ARIA document has a Notes on ARIA Use in HTML section.

It's a short section, and here's an even shorter summary:

  1. If you can use a native HTML element or attribute [...] instead of [...] an ARIA role, state or property [...], then do so.

  2. Do not change native semantics, unless you really have to.

    For example: Developer wants to build a heading that's a tab.

    Do not do this:

    <h2 role="tab">heading tab</h2>

    Do this:

    <div role="tab"><h2>heading tab</h2></div>

  3. All interactive ARIA controls must be usable with the keyboard.

  4. Do not use role="presentation" or aria-hidden="true" on a focusable element.

    Using either of these on a focusable element will result in some users focusing on 'nothing'.

  5. All interactive elements must have an accessible name.

Inspired by Bramus's summary of the five rules.