A switch must have a valid aria-checked
Rule
switch-state-valid· Component patterns (best practice) · impact serious · Static + live
Why it matters
A switch is an on/off control. It must expose aria-checked as exactly "true" or "false"; a missing value — or "mixed", which is not valid for switch — leaves its state unknown. A native conveys its state through the host checked attribute (HTML-AAM) and needs no aria-checked.
How to fix
Set aria-checked="true" or "false" on every role="switch" and toggle it as the user flips the switch. On a native checkbox host, rely on the checked state instead of adding aria-checked.
Example
<div role="switch" tabindex="0">Wi-Fi</div>
<div role="switch" tabindex="0" aria-checked="false">Wi-Fi</div>
Example
<input type="checkbox" role="switch" aria-checked="mixed" id="wifi">
<input type="checkbox" role="switch" id="wifi">
A native checkbox host conveys its state via checked; omit aria-checked rather than risk a conflicting value.
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 Best practice
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.4.1.2 |