- Success Criterion 2.5.3
- Conformance level A
ARIA Reference Pointing to the Wrong Element for a Name
2.5.3 — Label in Name
Scenario
Setting
A pharmacy app's prescription-refill form
What’s wrong
aria-labelledby (code pointing to the element that names it) referencing wrong element so name ≠ visible label.
Example
Open a pharmacy app's prescription-refill form and this is what you'll see: aria-labelledby (code pointing to the element that names it) referencing wrong element so name ≠ visible label.
Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text. On a pharmacy app's prescription-refill form specifically, they lose track of what belongs to what.
How to test
Inspect the aria-labelledby attribute's target id in DevTools: if it references the wrong element, the computed name won't match the visible label.
How to fix
The accessible name must contain the exact visible label text.
Outcome
Fixed, a visitor to a pharmacy app's prescription-refill form can move through the content with confidence.
Who is affected
Voice-control users and screen-reader users who depend on spoken names matching visible text.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Accessible Name That Doesn’t Match the Control’s Visible Label
- Visible Label Text With No Accessible Name Behind It
- ARIA Label Naming a Completely Different Action Than Shown
- Accessible Name Built From an Icon Instead of Visible Text
- Translated ARIA Label That Doesn’t Match the Visible Language
- Visible Label Text Reordered or Broken Apart in the Name