- Success Criterion 2.5.3
- Conformance level A
Accessible Name Built From an Icon Instead of Visible Text
2.5.3 — Label in Name
Scenario
Setting
A public library's catalog search
What’s wrong
Visible text present but name built only from icon alt / hidden text that differs.
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
Inspect a control's accessible name: if it's built only from an icon's alt text or hidden text that differs from the visible label, 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 public library's catalog search, this barrier is gone for voice-control users and screen-reader users who depend on spoken names matching visible text — they can complete the task without hitting this wall.
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
- 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