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.
<label for="phone">Phone</label>
<input id="phone" type="tel"><div id="phone-label">Phone</div>
<input type="tel" aria-labelledby="phone-label">Guides that rely on it
- Accordions that don't expose their open state
- Form fields with missing or mismatched labels
- Modals that leave keyboard focus behind them
Sources
- W3C, Using ARIA: the first rule of ARIA use (opens in a new tab)
- W3C ARIA Authoring Practices Guide: No ARIA is better than bad ARIA (opens in a new tab)
- W3C, HTML Accessibility API Mappings: how browsers expose each native element (opens in a new tab)
- a11ysupport.io: tested support for HTML and ARIA across browsers and screen readers (opens in a new tab)
- MDN: ARIA (opens in a new tab)