• Success Criterion 3.3.2
  • Conformance level A

Date Field Split Into Boxes With No Individual Labels

3.3.2 — Labels or Instructions

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Multi-field constructs (day/month/year) with a single distant label and unlabeled parts.

Example 

<label for="day">Listed since</label>
<input id="day" maxlength="2" placeholder="DD">
<input maxlength="2" placeholder="MM">
<input maxlength="4" placeholder="YYYY">
<!-- one label sits far to the left of three unlabeled boxes -->

Why it matters

A screen reader user hears 'Listed since' once, then three unlabeled edit boxes, with no way to tell which is the day, month, or year.

How to test

Look at a multi-field construct (day/month/year as three boxes): check whether each individual box has its own accessible name, not just one distant label for the whole group.

How to fix

Label every part of a split date individually inside a fieldset naming the whole date.

<fieldset>
  <legend>Listed since</legend>
  <label for="day">Day</label><input id="day" maxlength="2">
  <label for="month">Month</label><input id="month" maxlength="2">
  <label for="year">Year</label><input id="year" maxlength="4">
</fieldset>

Outcome

A buyer filters listings from the correct date without miscounting which box is which.

Who is affected

Screen reader users who cannot see the DD/MM/YYYY placeholders that visually distinguish the boxes.

Learn more

Related scenarios