Visual Example
Default State
...
Calendar Widget Expanded
...
...
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:
a) use the “TAB” key on the keyboard to navigate through the months and years in the calendar widget,
OR
b) use the arrow keys to navigate through the dates for the current month and then continue to the next month
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 explicitly associate manually enter the date in the form label with the form controlcontrol
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 the screen reader should announce ENTER INFORMATION HERE“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 recommended code example. 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.View Markup, CSS and JS Code.
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