- Success Criterion 2.5.3
- Conformance level A
- W3C reference F96
Accessible Name That Doesn’t Match the Control’s Visible Label
2.5.3 — Label in Name
Scenario
Setting
A crowdfunding platform's campaign page
What’s wrong
The name announced to screen readers is different from the label printed on the control — voice-control users say the visible label ('Click Search') and nothing happens.
Example
A tester reviewing a crowdfunding platform's campaign page finds this: the name announced to screen readers is different from the label printed on the control — voice-control users say the visible label ('Click Search') and nothing happens.
Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text. On a crowdfunding platform's campaign page specifically, they can't tell what's going on without extra effort.
How to test
Compare the control's visible text to its accessible name in DevTools' Accessibility panel: the visible text must appear within the name — if the name is built from something else entirely, it fails.
How to fix
Start the accessible name with the exact visible label text.
Outcome
Fixed, a visitor to a crowdfunding platform's campaign page 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)
- Technique Related technique (opens in a new tab)
Related scenarios
- 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
- ARIA Reference Pointing to the Wrong Element for a Name