- Success Criterion 2.5.3
- Conformance level A
Link’s Accessible Name Missing the Words Shown on Screen
2.5.3 — Label in Name
Scenario
Setting
A photo-sharing app's upload screen
What’s wrong
Link visible text "Pricing" with name "Learn more about our product tiers page" — label text absent from name.
Example
<button aria-label="Find">Search</button>Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text.
How to test
Compare 'Pricing' (visible link text) to its accessible name: if the name is a much longer, different phrase ('Learn more about our product tiers page') that doesn't contain the visible text, it fails.
How to fix
The accessible name must contain the exact visible label text.
<button aria-label="Search">Search</button>The accessible name must contain the visible label text so voice-control users can activate it by what they see.
Outcome
On a photo-sharing app's upload screen, this barrier is gone for voice-control users and screen-reader users who depend on spoken names matching visible text — they get the same result as anyone else here.
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