Accessibility
- Make sure the user can interact with the Date & Time Picker using the keyboard. To give the input keyboard focus, use the
tab key (or shift + tab when tabbing backwards)
- To activate the calendar popover, use the
enter/return or space keys when the calendar icon is in focus.
- To activate the input, use the
enter/return or space keys.
- Use a wrapping
<nav> element to identify the calendar popover as a navigation section to screen readers and other assistive technologies. Provide a descriptive aria-label (for example, “Pick a date” or “Pick a date range”) for the <nav> to reflect its purpose.
- Be sure to add
aria-label="Previous" and aria-label="Next" attributes to the previous/ next icons in the date picker.
- Provide clear and informative error messaging to help users understand what they needs to do to rectify the problem.
Further Reading
