- Success Criterion 4.1.2
- Conformance level A
Custom Checkbox or Toggle With No Role or Checked State
4.1.2 — Name, Role, Value
Scenario
Setting
A government tax-filing portal
What’s wrong
Custom checkbox/toggle/radio with no role and no aria-checked (the on/off state in code) — state invisible to assistive technology.
Example
Consider a government tax-filing portal: custom checkbox/toggle/radio with no role and no aria-checked (the on/off state in code) — state invisible to assistive technology.
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a government tax-filing portal specifically, they can't complete the task without extra help.
How to test
Inspect a custom checkbox/toggle/radio in DevTools: check for the correct role (checkbox/switch/radio) and a live aria-checked value — either missing fails.
How to fix
Add the proper role (checkbox/switch/radio) and a live aria-checked (the on/off state in code) state.
Outcome
Fixed, a visitor to a government tax-filing portal can complete the task without extra help.
Who is affected
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus