Visual Example
...
Default State
...
Calendar Widget Expanded
...
Acceptance Criteria
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 dates date in the form field, OR
b) pick the dates 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) user use the arrow keys to and 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
...
When the calendar form field has keyboard focus:
...
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 two code example examples of a date picker and calendar widget.
ARIA Based Date Pickers
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.
TEST THIS DATE PICKER BY DEQUE (KEYBOARD ONLY, SCREEN READER AND MOBILE)
https://dequeuniversity.com/library/aria/date-picker
Semantic Date Picker