Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 8 OF 8 · Complex widgets and data

Date picker

Choose a date from a calendar grid while checking selected date, today, and input fallback.

  • Level: Advanced
  • Time: 10-15 minutes
Objective

Test whether date pickers expose grid structure, date state, keyboard navigation, and a usable text input.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Move through the input and calendar. Listen for date names, selected date, and today.

Use YYYY-MM-DD or choose a date from the calendar.

MonTueWed

Expected behavior: users can type a date or use a keyboard-operable calendar with clear date state.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Try to identify today, selected date, and a typing fallback.

MonTueWed
202122
Hint

Visual calendar cells are not enough if users cannot type, navigate, or hear date state.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective date picker?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective picker is a visual calendar only. It has no editable input fallback, no real controls, and no exposed selected or current date state.

Repair

Use a proven date picker pattern. Provide a text input fallback, keyboard navigation, full date names where needed, and clear selected/current date state.

<input aria-describedby="date-help">
<p id="date-help">Use YYYY-MM-DD or choose a date.</p>
<button aria-current="date" aria-pressed="true">21</button>

Retest

  • Enter a date directly in the input.
  • Open the picker and navigate dates with the keyboard.
  • Confirm today and selected date are announced distinctly.

Report it

Example: The due date picker is only a visual grid, with no keyboard-operable date controls or text input fallback.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.