ARIA roles: why a native HTML element beats a div with a role

What it is

ARIA (Accessible Rich Internet Applications) is a set of roles, states and properties that tell assistive technology what an element is and what state it is in. It changes the accessibility tree only: it does not make an element focusable, add keyboard behaviour, validate input or change rendering. The W3C's Using ARIA document (a Discontinued Draft since February 2026, kept for its four rules; current guidance lives in the ARIA Authoring Practices Guide) opens with those rules. The first: if a native HTML element or attribute with the required semantics and behaviour exists, use it instead of repurposing another element and adding ARIA. The second: do not change native semantics unless you really have to (its example is <h2 role="tab">, which destroys the heading; the fix is <div role="tab"><h2>…</h2></div>). The third: every interactive ARIA control must be usable with the keyboard. The fourth: never put role="presentation" or aria-hidden="true" on a focusable element, because users then focus on "nothing".

Why it matters

A <button> is focusable, activates on Enter and Space, reports its disabled state, works inside forms and is announced as a button, all without code. A <div role="button"> gets only the announcement; the rest must be rebuilt and kept correct through every refactor. The APG's "Read Me First" page puts it bluntly: no ARIA is better than bad ARIA, because wrong roles and states actively mislead users who depend on them, while the visual interface looks fine to everyone else.

How to apply

• Reach for the native element first: button, a href, input, select, details/summary, dialog, fieldset/legend, table. Style it rather than replacing it for its default look.
• Use ARIA to fill gaps HTML has no element for (tab panels, tree views, comboboxes, live regions) and follow the matching APG pattern including its keyboard interaction.
• Add state properties (aria-expanded, aria-selected, aria-current, aria-invalid) only where you also update them from script; a stale state is worse than none.
• Label with visible text where possible; aria-label overrides visible text for screen-reader users and voice-control users may not be able to say what they see.
• Check the result in the browser's accessibility tree, not only in the DOM.

Pitfalls

Redundant roles (<button role="button">) are harmless; role="menu" on a navigation list is not, because the APG menu pattern promises arrow-key navigation that a plain list of links does not provide. aria-hidden="true" on a container hides its focusable descendants from the tree while keeping them in the Tab order; Using ARIA warns explicitly against applying it to an ancestor of a visible interactive element. States and properties that a role does not support are invalid and may be ignored.