• Success Criterion 2.4.6
  • Conformance level AA

Two Date Fields Both Labeled ‘Date’ With No From/To Distinction

2.4.6 — Headings and Labels

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Date range fields both labeled "Date" with no from/to distinction.

Example 

<!-- Restaurant menu screen: "Order ahead" catering scheduler -->
<label for="start">Date</label>
<input id="start" type="date">
<label for="end">Date</label>
<input id="end" type="date">

Why it matters

A customer scheduling a catering order from the restaurant's menu screen can't tell which Date field marks the start of the delivery window and which marks the end.

How to test

Check date-range fields both labeled simply 'Date': if there's no 'From'/'To' or similar distinction, it fails.

How to fix

Range fields always need labels that state their role in the range, not just the data type.

<label for="start">From date</label>
<input id="start" type="date">
<label for="end">To date</label>
<input id="end" type="date">

Outcome

A customer sets From date and To date correctly on the first try when scheduling their catering order.

Who is affected

Screen reader users scheduling an advance catering order from the menu can't tell which of the two identical Date fields they're currently editing.

Learn more

Related scenarios