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

Control With an On-Screen Label but No Accessible Name

4.1.2 — Name, Role, Value

Scenario

Setting

A food-delivery app's order-tracking 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 

<button class="contact-driver-btn"></button>
<style>.contact-driver-btn::before { content: "Contact driver"; }</style>
<!-- the label is CSS-generated content; the button element itself has no text node, alt, or aria-label -->

Why it matters

A screen reader announces just "button" with no text, and a "contact driver" voice command has nothing to match.

How to test

Compare visible label text to the computed accessible name in DevTools: if the control shows text but has no accessible name at all, it fails.

How to fix

CSS-generated content is invisible to the accessibility tree; always keep real text inside the element.

<button class="contact-driver-btn">Contact driver</button>
<style>.contact-driver-btn { /* style the real text; don't replace it with ::before content */ }</style>

Outcome

A customer says "tap contact driver" and voice control finds the button immediately.

Who is affected

Screen reader users and voice-control users tracking a delivery cannot find or trigger the contact-driver action.

Learn more

Related scenarios