Roles must declare their required states

Rule aria-required-attr · ARIA · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Some roles are incomplete without certain states — a role="checkbox" with no aria-checked has no checked/unchecked state for AT to announce.

How to fix#

Add the state the role requires — aria-checked on checkbox, radio and switch, aria-level on heading, the current value on range widgets such as slider and scrollbar — and update it as the widget changes. Switching to the native element is the other fix: <input type="checkbox"> or <input type="range"> supply the state themselves (an <input type="checkbox" role="switch"> needs no aria-checked). Removing the role is the last resort — a div without a role announces nothing.

Example#

<div role="checkbox">Subscribe</div>

<div role="checkbox" aria-checked="false">Subscribe</div>

Example#

<div role="switch">Dark mode</div>

<input type="checkbox" role="switch">

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WAI-ARIA — Required States