- Success Criterion 4.1.2
- Conformance level A
Toggle Button Showing State Only Through Color or Icon Change
4.1.2 — Name, Role, Value
Scenario
Setting
A used-car marketplace's listing filter
What’s wrong
Toggle buttons using color/icon change only, no aria-pressed (the pressed state in code).
Example
On a used-car marketplace's listing filter, a visitor hits this wall: toggle buttons using color/icon change only, no aria-pressed (the pressed state in code).
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a used-car marketplace's listing filter, this barrier means they hit a dead end with no way forward.
How to test
Inspect a toggle button in DevTools: check for aria-pressed (or role="switch" with aria-checked) reflecting its state — missing fails.
How to fix
Add aria-pressed (the pressed state in code) (or role='switch' + aria-checked (the on/off state in code)) so the toggle state is announced.
Outcome
Corrected, a used-car marketplace's listing filter now lets a visitor 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