Skip to content

Learn

Rules of thumb

When a guide offers more than one fix and recommends one, the reason is usually one of these. Each rule lists the guides that rely on it.

Use native HTML first

When an HTML element does the job, use it, and reach for ARIA only when none does.

Why

  • Behaviour comes with the element. A button responds to Enter and Space, a label puts focus in its field when clicked, and a dialog opened with showModal() keeps focus inside. With a div and ARIA, you write each of those yourself, and they are easy to leave out.
  • ARIA changes what is announced, not what happens. role="button" makes a screen reader say "button", but the element still ignores the keyboard until you add the code. A screen reader user is told one thing and gets another.
  • Native elements work in more places. Browser autofill, voice control, forced colors, reader views and older assistive technology all understand label, button and select. Support for ARIA roles and attributes is uneven across them.
  • There is less to keep working. Browsers maintain native behaviour and fix it for you. Hand-written ARIA and its scripts break silently when markup is renamed, a component is updated or a script fails to load.
Prefer
<label for="phone">Phone</label>
<input id="phone" type="tel">
Over
<div id="phone-label">Phone</div>
<input type="tel" aria-labelledby="phone-label">

Guides that rely on it

Sources