ARIA is for when native semantics fall short
Aliases: ARIA · semantic supplement · accessibility attributes
What it is
HTML and system widgets already express buttons, links, headings, and fields. WAI-ARIA is a layer that fills role, relationship, and state in the accessibility tree when that native vocabulary is not enough. Tab lists, trees, and comboboxes often have no native equivalent, and that is when the supplement earns its keep. Most buttons and inputs do not need it.
Why it happens
Native elements enter the tree as the browser’s job: write a button and role, focus, and key behavior arrive together. ARIA is an author-written declaration over a hole in that vocabulary, telling the tree to treat this cluster as tabs. When the hole is real, the declaration supplies structure the user would otherwise never hear; when it is not, the declaration repeats or rewrites a mapping that already exists.
“Not enough” is a high bar. A pattern a native control can already finish does not gain power from ARIA, only another mapping to maintain. Real shortage is: the platform has no such widget, or the existing widget cannot say “these nodes are one tab set.” The supplement fills holes; it is not a label to stick on every node.
Studying it
Inventory every ARIA attribute on a page and ask, one by one, whether native elements already provide the same role and operation if it is removed. Count “filled a real hole” separately from “stacked on a native control.”
Independent variables: presence of a native equivalent, whether the attribute changes the role in the tree. Dependent variables: whether the reader gains new jumpable structure, whether the task still completes after removal.
Compare NVDA+Firefox with VoiceOver+Safari: some holes are covered natively in one engine and not in the other.
Where it stops holding
The native vocabulary moves with platform versions. A pattern that had to be supplemented yesterday may have a native control today; keeping the supplement then becomes a duplicate declaration. Mobile system widgets and the web do not share a vocabulary, so a hole on the web may not exist in a native app. Status changes without navigation do often need a supplement; that does not imply every dynamic surface needs attributes.
Applying it
- Ask first whether a native element can express the thing; only then add a role or relationship.
- Reserve ARIA for patterns the native vocabulary cannot cover — tabs, trees, dialogs, in-place status changes.
- How to check: list every ARIA attribute on the page and mark those replaceable by native elements. Anything still there that could be replaced is not filling a hole.