- Success Criterion 2.5.3
- Conformance level A
- W3C reference F111
Visible Label Text With No Accessible Name Behind It
2.5.3 — Label in Name
Scenario
Setting
A ride-hailing app's trip booking screen
What’s wrong
A control shows label text on screen but has no accessible name at all — screen readers announce nothing useful and voice control can't target it.
Example
A ride-hailing app's trip booking screen runs into this exact issue: a control shows label text on screen but has no accessible name at all — screen readers announce nothing useful and voice control can't target it.
Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text. In this case (a ride-hailing app's trip booking screen), they can't tell how the page is organized.
How to test
Inspect a control that shows label text on screen: check its computed accessible name — if empty, it fails.
How to fix
Give the control an accessible name that includes its visible label text.
Outcome
Once corrected, a ride-hailing app's trip booking screen lets them navigate the content in a sensible order.
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)
- Technique Related technique (opens in a new tab)
Related scenarios
- Accessible Name That Doesn’t Match the Control’s Visible Label
- 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
- ARIA Reference Pointing to the Wrong Element for a Name