ARIA
Switches, radios and checkboxes need a name
- Rule:
aria-toggle-field-name - Severity: Serious
- WCAG level A
Why it matters
A toggle with no name is announced as "switch, off" — the state is clear, the subject is not. In a settings panel every row sounds identical.
How to fix it
- Associate the visible label with aria-labelledby, or use a native <label>.
- Where there is no visible label, add aria-label naming the setting.
- Do not rely on nearby text: proximity on screen is not a relationship in code.
In markup
<div role="switch" aria-checked="false" tabindex="0"></div><div role="switch" aria-checked="false" tabindex="0" aria-label="Dark mode"></div>The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A
Further reading
Deque University on aria-toggle-field-name (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.