Custom checkboxes, switches or radio buttons have no accessible name
Automated check aria-toggle-field-name, run with axe-core
- WCAG
- 4.1.2 Name, Role, Value (Level A)
- Severity
- Blocker: a task cannot be completed
- Typical effort
- Quick win, under 1 hour
- Category
- Forms and controls
Who this affects
Screen reader users, and voice-control users.
Why it matters
A custom toggle without a name is announced as "checkbox, not checked" with no hint of what it controls, such as newsletter consent or accepting the terms at checkout.
How to fix it
Associate a visible label with aria-labelledby, or add aria-label. A native <input type="checkbox"> with a <label> needs no ARIA at all.
Check your own website
The free scan tests 3 pages against WCAG 2.2 A and AA in about 30 seconds. No sign-up.
Related checks: Forms and controls
- Custom buttons, links or menu items have no accessible name
- Dialogs have no accessible name
- Custom input widgets have no accessible name
- Form fields use invalid autocomplete values
- Buttons have no discernible text
- Form field has more than one label
- Form buttons have no accessible name
- Image buttons have no text alternative