Date picker dialog - Web accessibility testing checklist

How to test a date picker dialog

Gherkin Checklist

Given that I am on a screen with a date picker dialog

1 Keyboard only

WHEN I use the tab key to move focus to the date dialog button I SEE focus is strongly visually indicated
Then when I use the spacebar and/or enter key I SEE the date picker dialog appears
Then when I use the arrow keys I SEE the selection moves through next/previous dates
Then when I use the home/end key I SEE the selection moves to the first/last day of the current week
Then when I use the page up/down key I SEE the grid of dates moves to the next/previous month
Then when I use shift key + page up/down I SEE the grid of dates moves to the next/previous year
Then when I use the spacebar and/or enter key I SEE the button or selection is activated
Then when I use the escape key I SEE the date picker dialog disappears and focus returns to the date dialog button

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the date dialog button
- I HEAR The purpose of each control is clear
- I HEAR Buttons identify as buttons, dialog identifies itself dialog or modal, date grid table may identify itself as table or grid
- I HEAR The launch button indicates it has a popup, menu or dialog; days are announced with month and year
- I HEAR Date options express state (pressed, selected, disabled/dimmed)
Then when I use the spacebar and/or enter key I HEAR the date picker dialog appears
Then when I use the arrow keys I HEAR the selection moves through next/previous dates
Then when I use the home/end key I HEAR the selection moves to the first/last day of the current week
Then when I use the page up/down key I HEAR the grid of dates moves to the next/previous month
Then when I use shift key + page up/down I HEAR the grid of dates moves to the next/previous year
Then when I use the spacebar and/or enter key I HEAR the button or selection is activated
Then when I use the escape key I HEAR the date picker dialog disappears and focus returns to the date dialog button

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on the date dialog button
- I HEAR The purpose of each control is clear
- I HEAR Buttons identify as buttons, dialog identifies itself dialog or modal, date grid table may identify itself as table or grid
- I HEAR The launch button indicates it has a popup, menu or dialog; days are announced with month and year
- I HEAR Date options express state (pressed, selected, disabled/dimmed)
Then when I doubletap with the button in focus I HEAR the date picker dialog appears
Then when I swipe through the dialog I HEAR the date options and controls come into focus
Then when I doubletap with the selection or button in focus I HEAR the intended action occurs

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the date grid table and calendar navigation buttons
Escape	The dialog closes and focus returns to the launch button
Arrow keys	Date selection visibly moves through next/previous days
Page up/down	Changes the grid of dates to the previous/next month.
Shift + page up/down	Changes the grid of dates to the previous/next year.
Home/end	Moves focus to the first/last day of the current week.
Spacebar or enter	Activates the date picker buttons and calendar navigation buttons

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves through elements, expresses its state
Doubletap	Activates the element in focus

3 Screenreader output

Reads	I hear
Name	The purpose of each control is clear
Role	Buttons identify as buttons, dialog identifies itself dialog or modal, date grid table may identify itself as table or grid
Group	The launch button indicates it has a popup, menu or dialog; days are announced with month and year
State	Date options express state (pressed, selected, disabled/dimmed)

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Developer notes

Full WAI-ARIA requirements

An accessible date picker will have the following components:

Launch button

Opens the date picker
Focus returns to this button on closing the popup dialog

The dialog itself should be labelled by the month and year with aria-labelledby="month-year-heading-id"
Use aria-live="polite" for the dialog, aria-live="polite" for month/year heading

Use aria-label="Previous" and aria-label="Next" to name the buttons.

Date grid table

Use aria-labelledby="month-year-heading-id" to label the table

Date picker buttons

Use aria-selected="true" to indicate state

Web Date picker dialog

How to test a date picker dialog

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Developer notes

Launch button

Calendar navigation buttons

Date grid table

Date picker buttons

Related date picker dialog entries

Web Date picker dialog

How to test a date picker dialog

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Developer notes

Launch button

Date picker popup dialog

Calendar navigation buttons

Date grid table

Date picker buttons

Related date picker dialog entries