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

Visible Label Text With No Matching Accessible Name

1.3.1 — Info and Relationships

Scenario

Setting

A ticket marketplace's seat-selection map

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="seat available"><span class="icon-seat"></span></button>
<p class="seat-label">A12</p>

Why it matters

A screen reader user tabbing through the seat map hears only "button" repeated for every seat, with no way to tell A12 from B7.

How to test

Focus each form field with Tab and listen: if a screen reader announces only 'edit text' with no name, the visible label text isn't programmatically connected.

How to fix

Text sitting next to a control visually isn't connected to it programmatically; an aria-label supplies the missing accessible name.

<button class="seat available" aria-label="Seat A12, available">
  <span class="icon-seat" aria-hidden="true"></span>
</button>

Outcome

A screen reader user picks seat A12 by name, the same way a sighted person clicks it on the map.

Who is affected

Screen reader and voice control users picking seats can't identify or target any individual seat button.

Learn more

Related scenarios