• Success Criterion 3.3.2
  • Conformance level A
  • W3C reference F82

Multi-Part Field Like a Phone Number With No Text Label

3.3.2 — Labels or Instructions

Scenario

Setting

A podcast app's episode list

What’s wrong

A multi-part field (like a phone number split into boxes) has no text label at all — visually it 'looks like' a phone field but nothing says so.

Example 

<div class="phone-group">
  <input maxlength="3" size="3">
  <input maxlength="3" size="3">
  <input maxlength="4" size="4">
</div>
<!-- no label element, no legend; the three-box shape is the only clue it's a phone number -->

Why it matters

A screen reader announces three unlabeled edit boxes in a row, giving no clue this is a phone number for episode alerts, so users can't complete sign-up.

How to test

Look at a multi-part field (e.g., phone number split into area code/number boxes): check for a text label — visual grouping alone with no label text fails.

How to fix

Give each box its own label and wrap the group in a fieldset and legend describing the whole number.

<fieldset>
  <legend>Phone number for episode alerts</legend>
  <label for="area">Area code</label>
  <input id="area" maxlength="3">
  <label for="prefix">Prefix</label>
  <input id="prefix" maxlength="3">
  <label for="line">Line number</label>
  <input id="line" maxlength="4">
</fieldset>

Outcome

The listener enters their number correctly and starts receiving alerts for new episodes.

Who is affected

Screen reader users and people with cognitive disabilities who cannot infer a field's purpose from its visual layout alone.

Learn more

Related scenarios