- 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
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus