Calendar / Date Picker

Visual Example

Default State

Open

Calendar Widget Expanded

Open

Acceptance Criteria

Design and color contrast

• Provide sufficient color contrast between foreground and background in order to meet WCAG Level AA guidelines

• Add a background color and border around each date to make it easier for vision impaired and older users to read and make a selection.

As a screen reader and keyboard only user I should:

• be able to navigate to and access the calendar form field by using the “TAB” key on the keyboard

• be able to:

a) type the date in the form field, OR

b) pick the date from the calendar widget

• be able to press the “ENTER” key on the keyboard to activate the calendar button/widget

• be able to either:

• be able to use the left/right ←/→ arrow keys on the keyboard to navigate between dates in the calendar widget

• be able to use the “ENTER” key on the keyboard to select a date in the calendar widget

• be able to manually enter the date in the form control

• be provided with help text on how to manually enter the date

• be provided with a “Close” or “Cancel” button if I don’t want to enter a date

When the calendar form field has keyboard focus: 

• the screen reader should announce the month, day and year format to enter

When the calendar button has keyboard focus: 

• the screen reader should announce “Choose date button. To activate press ENTER.

When the calendar widget has been activated: 

• the screen reader should announce the current month and date

• the screen reader should announce how to navigate dates and months

Markup and Code

Please see the following two code examples of a date picker and calendar widget.

ARIA Based Date Picker

It is fully accessible to both keyboard only and screen reader users.

Have tested on iOS mobile device and works fine when voice-over screen reader has been activated.

View example of ARIA based date picker

Semantic Date Picker

View example of semantic based date picker