...
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 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:
...
Have tested on iOS mobile device and works fine when voice-over screen reader has been activated.
View Markup, CSS and JS Codeexample of ARIA based date picker
Semantic Date Picker
View Markup, CSS and JS Codeexample of semantic based date picker