• Success Criterion 2.1.1
  • Conformance level A

Date Picker Grid That Can’t Be Navigated by Keyboard

2.1.1 — Keyboard

Scenario

Setting

A community forum's discussion thread

What’s wrong

Date pickers where the grid isn't keyboard navigable and manual text entry is blocked.

Example 

<input type="text" id="meetup-date" readonly onclick="showCalendar()">
<div class="calendar-grid">
  <span onclick="pick(1)">1</span><span onclick="pick(2)">2</span>
</div>

Why it matters

A forum member using only a keyboard can open the calendar but cannot move between day cells or type the date directly.

How to test

Tab into a date picker's calendar grid and try arrow keys: if the grid isn't navigable and there's no way to type the date manually, it fails.

How to fix

Remove readonly so a date can be typed, and add roving tabindex with arrow-key movement across the grid as a second way in.

<input type="text" id="meetup-date" onclick="showCalendar()">
<span tabindex="0" role="gridcell" onkeydown="handleGridKey(event, 1)">1</span>
<!-- handleGridKey moves focus with ArrowLeft/Right/Up/Down and selects the day with Enter -->

Outcome

A forum member either types the meetup date directly or arrows across the grid to pick a day.

Who is affected

Keyboard-only users are blocked twice over: the input rejects typed dates and the grid ignores arrow keys.

Learn more

Related scenarios