• Success Criterion 2.5.3
  • Conformance level A
  • W3C reference F111

Visible Label Text With No Accessible Name Behind It

2.5.3 — Label in Name

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

A control shows label text on screen but has no accessible name at all — screen readers announce nothing useful and voice control can't target it.

Example 

<div class="confirm-btn" onclick="confirmPickup()">
  <span aria-hidden="true">Confirm Pickup</span>
</div>

Why it matters

A screen reader announces only 'clickable,' and a voice-control user has no words at all to say to activate it.

How to test

Inspect a control that shows label text on screen: check its computed accessible name — if empty, it fails.

How to fix

A real button element carries its text content as its name automatically; drop the aria-hidden span trick.

<button onclick="confirmPickup()">Confirm Pickup</button>

Outcome

A rider hears 'Confirm Pickup, button' and activates it with one voice command.

Who is affected

Screen reader users and voice-control users who both depend on a real accessible name to find and trigger the control.

Learn more

Related scenarios