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

Multi-Part Field Where Each Box Has No Individual Name

4.1.2 — Name, Role, Value

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

Each box of a multi-part field (e.g., 3 phone-number boxes) has no individual name — screen readers announce three anonymous 'edit' fields.

Example

<div class="ticket-qty-group">
  <span>Tickets</span>
  <input type="number" id="qty1">
  <input type="number" id="qty2">
  <input type="number" id="qty3">
</div>
<!-- one heading covers three separate quantity boxes for Adult, Child, and Senior tickets,
     but only the group has text -->

Why it matters

A screen reader user hears "edit text" three times in a row and cannot tell which box counts adults versus children.

How to test

Inspect a multi-part field (e.g., a 3-box phone number): check whether each box has its own accessible name, not just a single label for the whole group.

How to fix

Give every box in a group its own label; a shared heading is not enough for assistive tech.

<div class="ticket-qty-group">
  <label for="qty1">Adult tickets</label>
  <input type="number" id="qty1">
  <label for="qty2">Child tickets</label>
  <input type="number" id="qty2">
  <label for="qty3">Senior tickets</label>
  <input type="number" id="qty3">
</div>

Outcome

A buyer hears each field named correctly and orders the right number of adult and child seats.

Who is affected

Screen reader users buying tickets risk purchasing the wrong mix of adult, child, and senior seats.

Learn more