Prefer native semantic elements
Aliases: first rule of ARIA · native semantics · native controls
What it is
If a button will do, do not fake one with a clickable empty box. A native semantic element arrives with role, focus, keyboard behavior, and platform mapping — a bundle the browser vendor maintains. ARIA can only declare “please treat me as a button”; the rest of the bundle still has to be supplied by the author. Preferring native is not an aesthetic taste. It is refusing to maintain a hand-built contract.
Why it happens
Native elements are delivered as a bundle: the role enters the tree, the object is focusable, activation keys work, and mobile touch and desktop keyboard share a mapping. When an author writes a supplemental role, what is declared is a type label on the tree; whether focus can land, whether keys activate, whether every reader will announce it as a button, is not included. The bundle is tested by the browser across versions and combinations; the hand-built pack is tested by the product, and one untested combination breaks it.
The update path differs too. When a platform remaps or fixes a bug, native elements ride along; a hand-built control stays frozen on the day the author wrote the declaration. Preferring native hands “this is a button” to the layer that will still be alive next year.
Studying it
Implement the same interaction twice: a native element, and a visually identical hand-built control with a supplemental role. Walk keyboard or the system back gesture on NVDA+Firefox, JAWS+Chrome, VoiceOver+Safari, and TalkBack. Record which combinations drop focus, drop activation, or mis-announce the type.
Independent variables: native versus hand-built. Dependent variables: number of combinations that can focus, number that can activate, whether announced type agrees.
Do not inspect the tree only in the author’s own browser. The hole usually sits in the reader–browser pair that was never tested.
Where it stops holding
Patterns with no native vocabulary (custom tabs, trees) cannot prefer native; the supplement then has to carry the whole behavior as well. Native elements stripped by style until they are unrecognizable — focus ring removed with no replacement, hit area detached from the element — give the preference away. Some platforms constrain how far a native control may be restyled, and products then draw their own. That is a tradeoff, not proof that hand-built and native are equivalent.
Applying it
- Use native elements first for buttons, links, headings, lists, form controls, and tables; restyle them toward the visual.
- Start a hand-built control and add a role only after confirming the native vocabulary has no equivalent.
- How to check: search the inspector for clickable boxes that are not native elements. Replace every one that can be replaced, then activate once with a reader — the combinations that stop failing are the part of the native bundle that had been carrying you.