- 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
<a href="/plans" aria-label="View additional storage plans and pricing options">Upgrade</a>Why it matters
Saying 'click Upgrade,' the only word actually on screen, doesn't match the much longer stored name at all.
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 can add context, but it must still contain the visible word 'Upgrade.'
<a href="/plans" aria-label="Upgrade storage plan">Upgrade</a>Outcome
Low on storage, a user says 'click Upgrade' and reaches the plans page immediately.
Who is affected
Voice-control users trying to upgrade storage when their photo library has run out of room.
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