- Success Criterion 4.1.2
- Conformance level A
Expanded State Attribute That Never Updates When Toggled
4.1.2 — Name, Role, Value
Scenario
Setting
A fitness app's workout tracker
What’s wrong
aria-expanded (the open/closed state in code) present but never updated by JS (state stuck).
Example
A QA pass on a fitness app's workout tracker turns this up: aria-expanded (the open/closed state in code) present but never updated by JS (state stuck).
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. The practical effect on a fitness app's workout tracker: they have to work around the barrier just to continue.
How to test
Toggle a stateful control (expand, select, check) and watch DevTools live: if the state attribute doesn't change value, it fails.
How to fix
Update aria-expanded (the open/closed state in code) in the same handler that opens/closes the content.
Outcome
That one change on a fitness app's workout tracker means they move past the barrier without workarounds.
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