ARIA

Also known as: Accessible Rich Internet Applications

A set of HTML attributes that fill in semantic gaps for assistive tech. Used wisely it helps; used carelessly it hurts.

ARIA — Accessible Rich Internet Applications — is a W3C specification of HTML attributes (`role`, `aria-label`, `aria-expanded`, etc.) that communicate structure and state to assistive technologies when native HTML semantics aren’t enough. A custom dropdown built from `<div>`s might use `role="listbox"` and `aria-activedescendant` to behave correctly under a screen reader.

The first rule of ARIA is "don’t use ARIA." A correctly chosen native element (`<button>`, `<select>`, `<dialog>`) ships the right semantics and behavior automatically. ARIA fills the gap when a native element isn’t available — but a misapplied `role` can make a perfectly accessible button announce as an unfamiliar widget and confuse the user further.

The pragmatic guideline: prefer semantic HTML, reach for ARIA when you can’t, and test with a real screen reader before shipping. NVDA on Windows and VoiceOver on macOS / iOS are free and used by most actual users.

Specs & references

→ MDN: ARIA