ARIA

ARIA helps when native HTML cannot express a custom interaction pattern. It should complement semantic HTML, not replace it.

Why ARIA matters

Screen readers rely on the accessibility tree, not visual styling. ARIA can expose names, roles, and states so custom controls are announced correctly.

How ARIA works

ARIA adds:

• Roles (what the element is, like button or dialog)
• States (current condition, like aria-expanded)
• Properties (relationships, like aria-labelledby)

First rule of ARIA: if native HTML already provides semantics, prefer native elements.

Code examples

<!-- Avoid: non-semantic button with incomplete ARIA -->

<div role="button">Save</div>

<!-- Prefer native control -->

<button type="button">Save</button>

<!-- Custom disclosure with synchronized state -->

<button aria-expanded="false" aria-controls="details">Details</button>
<div id="details" hidden>...</div>