- Success Criterion 2.5.3
- Conformance level A
ARIA Label Naming a Completely Different Action Than Shown
2.5.3 — Label in Name
Scenario
Setting
A recipe site's ingredient list
What’s wrong
aria-label="Submit form" on a button visibly reading "Search" (name mismatch — speech users say "click Search" and fail).
Example
During an audit of a recipe site's ingredient list: aria-label="Submit form" on a button visibly reading "Search" (name mismatch — speech users say "click Search" and fail).
Why it matters
Voice-control users and screen-reader users who depend on spoken names matching visible text. The practical effect on a recipe site's ingredient list: they lose track of what belongs to what.
How to test
Inspect the aria-label attribute versus the visible button text (e.g., aria-label="Submit form" on a button reading "Search"): a mismatch fails, since voice-control users saying the visible label get no match.
How to fix
The accessible name must contain the exact visible label text.
Outcome
That one change on a recipe site's ingredient list means they understand how the page is organized.
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
- 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