ARIA.

ARIA is a set of attributes used to convey role, state and property information to assistive technology where HTML cannot express it on its own.

ARIA is a complement that steps in where semantic HTML falls short — not a replacement for it. That distinction is the most important rule about ARIA, and when it is misunderstood the result is worse than using no ARIA at all.

It conveys three things. The role says what an element is — a tab, a dialog, a progress bar. The state says what condition it is in at that moment — open or closed, selected or not, invalid. The property carries qualities that do not change — which element it controls, what text labels it.

The critical point is this: ARIA adds no behaviour. Giving an element the button role does not make it work with a keyboard; it only tells the screen reader “this is a button”. Keyboard support, focusability and key behaviour still have to be written. That is why using a real button element is always safer than imitating one with ARIA.

The first rule of the WAI-ARIA authoring guidance sums this up in a sentence: if there is a built-in HTML element that does the job, use it instead of ARIA. The second rule points the same way — do not override built-in semantics with ARIA.

1. Declaring the wrong role is worse than declaring none — the screen reader has been told a lie.
2. Forgetting to remove a visually hidden element from the accessibility tree leaves the user wandering through invisible content.
3. Hiding an element while leaving it focusable produces a silent focus stop.
4. Giving a label both natively and through ARIA creates a conflict; ARIA usually wins and the native label disappears silently.

The practical approach is this: choose the right HTML element first, notice that the behaviour comes free from the browser, and use ARIA only for the gap that remains. Components with no HTML equivalent — a tab group, an accordion, a custom dropdown — are where ARIA is genuinely required.

One place ARIA is commonly misused is in producing the accessible name. When an element is given both a native label and an ARIA label the two collide, and ARIA usually wins — the native label disappears silently. The text on screen and the text read out diverge, and someone using voice control cannot activate the element by saying the label they can see.

As a rule: before adding ARIA, ask “can this information already be derived from the HTML?” If the answer is yes, ARIA is unnecessary and adding it carries risk.