ARIA: when and how to use it

Model answer. ARIA (Accessible Rich Internet Applications) is a set of attributes that add or adjust the information assistive technologies receive about an element. It changes only what is announced, never behaviour or appearance.

• Roles: what the element is: role="dialog", role="tablist"/"tab", role="alert".
• States and properties: aria-expanded="false", aria-selected, aria-checked, aria-invalid, aria-hidden="true", aria-label, aria-labelledby, aria-describedby, aria-live="polite".

<button aria-expanded="false" aria-controls="filters">Filters</button>
<div id="filters" hidden>…</div>

<p role="status" aria-live="polite">12 colleges match your filters</p>

(The script toggling the panel must also update aria-expanded.)

First rule of ARIA: if a native HTML element already has the meaning and behaviour you need, use it instead of adding ARIA. <button> beats <div role="button">; <nav> beats role="navigation".

Common mistakes:

• Adding a role without the behaviour: role="button" on a <div> still is not focusable or keyboard-operable.
• `aria-hidden="true"` on focusable content: keyboard users can tab to something screen readers cannot see.
• Contradicting native semantics (<h2 role="button">), or labels that do not match the visible text, which confuses voice-control users.
• Stale states: aria-expanded never updated when the panel opens.

"No ARIA is better than bad ARIA": always test with a keyboard and a screen reader.