Roles must declare their required states
Rule
aria-required-attr· ARIA · impact serious · Static + live
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 required states for the role you used (and keep them in sync with the visual state).
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.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.4.1.2 |