• 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 

<button aria-label="Pledge now">Back this project</button>

Why it matters

A voice-control user says 'click Back this project,' the exact words on screen, and the command fails silently.

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

Simplest fix: drop the aria-label entirely and let the visible text be the accessible name.

<button aria-label="Back this project">Back this project</button>

Outcome

A voice-control user says the button's own words and the pledge screen opens right away.

Who is affected

Voice-control users, including people with limited or no hand mobility who navigate entirely by speech.

Learn more

Related scenarios