Web Accessibility

ARIA

Attributes that describe roles and states to assistive technology when HTML alone cannot.

ARIA is a set of HTML attributes that describe roles, states and relationships to assistive technology — that this div behaves as a tab, that this menu is expanded. Its first rule is not to use it: a native HTML element with the same semantics is always better, because ARIA describes behaviour without providing it.

Definition

Accessible Rich Internet Applications (ARIA) adds attributes such as role, aria-expanded, aria-label and aria-describedby, so custom components can announce what a native element would announce for free.

The specification's own first rule is to prefer native HTML. role="button" on a div tells a screen reader it is a button but supplies none of a real button's keyboard behaviour or focus handling — so incorrect ARIA is measurably worse than none.

Why It Matters

Custom components are where accessibility usually breaks. ARIA is how a custom component becomes usable — and, applied carelessly, how it becomes actively misleading.

Example

<button aria-expanded="false" aria-controls="panel-1"> tells a screen reader the control is collapsed and what it opens. A div with role="button" and no keydown handler does not.

The first rule of ARIA is not to use ARIA

This is the specification's own guidance, and it is not a stylistic preference. A native <button> is focusable, activates on Enter and Space, announces itself as a button, and participates in forms — all without a line of ARIA.

A <div role="button"> announces itself as a button and does none of the rest. Unless you add tabindex, keydown handlers for both Enter and Space, and focus styling, you have told a screen-reader user this is a button and then made it not behave like one. That is measurably worse than a plain div, because the promise was made and broken.

Reach for ARIA when there is genuinely no native element — a tab set, a combobox, a live region — and follow the authoring practices for that pattern rather than improvising.

How SlapMyWeb checks this

The accessibility module runs axe-core against the rendered page, which catches the ARIA failures that matter: a role with required attributes missing, an aria-labelledby pointing at an id that does not exist, and interactive elements with a role but no keyboard handling. It reports each against the WCAG criterion it violates rather than as a generic warning.

Related Terms

Accessibility Skip Navigation Tab Order

Know the term.
Check your own site.

A free audit tells you whether this is currently costing you score points — and exactly what to change.

Run a free audit

Free foreverNo signupResults in 30s