- Success Criterion 4.1.2
- Conformance level A
Duplicate Element IDs Causing a Control’s Name to Resolve Wrong
4.1.2 — Name, Role, Value
Scenario
Setting
A childcare-booking service's scheduling page
What’s wrong
Duplicate IDs making aria-labelledby (code pointing to the element that names it)/for resolve to the wrong node (name wrong).
Example
A QA pass on a childcare-booking service's scheduling page turns this up: duplicate IDs making aria-labelledby (code pointing to the element that names it)/for resolve to the wrong node (name wrong).
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a childcare-booking service's scheduling page specifically, they have to work around the barrier just to continue.
How to test
Inspect for/id and aria-labelledby references in DevTools: if duplicate ids exist on the page, the browser may resolve a name to the wrong element.
How to fix
Make ids unique so names resolve to the intended elements.
Outcome
Fixed, a visitor to a childcare-booking service's scheduling page 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