Visual Example
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 either:
a) type the dates in the form field, OR
b) pick the dates from the calendar widget
be able to press the “ENTER” key on the keyboard to activate the calendar button
be able to use the “TAB” key on the keyboard to navigate through the months and years in the calendar widget
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
As a screen reader user I should:
When the calendar form field has keyboard focus:
be able to use the “TAB” key on the keyboard to navigate through the months and years
be able to use the left/right ←/→ arrow keys on the keyboard to navigate between dates
be able to use the “ENTER” key on the keyboard to select a date
the screen reader should announce ENTER INFORMATION HERE
Markup and Code
Please see the following recommended code example of a date picker and calendar widget.
It is fully accessible to both keyboard only and screen reader users.