Accessibility
Learn how the Date and Time Pickers implement accessibility features and guidelines, including keyboard navigation that follows international standards.
Guidelines
Common conformance guidelines for accessibility include:
- Globally accepted standard: WCAG
- US:
- ADA - US Department of Justice
- Section 508 - US federal agencies
- Europe: EAA (European Accessibility Act)
WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.
The WAI-ARIA Authoring Practices includes examples on Date Picker Dialog and Date Picker Spin Button patterns, which provide valuable information on how to optimize the accessibility of these components.
Dialog considerations
Both Desktop and Mobile Date and Time Pickers are using role="dialog" to display their interactive view parts and thus they should follow Modal accessibility guidelines.
This behavior is automated as much as possible, ensuring that the Date and Time Pickers are accessible in most cases.
A correct aria-labelledby value is assigned to the dialog component based on the following rules:
- Use
toolbarid if the toolbar is visible; - Use the id of the input label if the toolbar is hidden;
Screen reader compatibility
Date and Time Pickers use ARIA roles and robust focus management across the interactive elements to convey the necessary information to users, being optimized for use with assistive technologies.
Keyboard support
The Date and Time Pickers consist of different associations of Field, Calendar, and Clock components. Each of these components is designed to respond intuitively to keyboard interactions, providing extensive keyboard navigation support.
Fields
The following table describes the keyboard support for all field components:
| Keys | Description |
|---|---|
| Arrow Left, Arrow Right | Moves focus among date/time sections |
| Arrow Up | Increases focused section value by 1 |
| Arrow Down | Decreases focused section value section by 1 |
| Page Up | Increases focused section value section by 5 |
| Page Down | Decreases focused section value section by 5 |
| Home | Sets focused section to the minimal value |
| End | Sets focused section to the maximal value |
Date Calendar
Among the available view components, day is the only one that implements specific keyboard support:
| Keys | Description |
|---|---|
| Page Up | Moves calendar to next month, keeping focus on the same day |
| Page Down | Moves calendar to previous month, keeping focus on the same day |
| Home | Moves focus to the first day of the week |
| End | Moves focus to the last day of the week |
Date Picker
The Date Picker combines the functionalities of the Date Field and Date Calendar components.
Depending on which component is in focus, the Picker will provide the corresponding keyboard support, either from Date Field or Date Calendar.
Date Range Calendar
The Date Range Calendar implements a similar keyboard support as the day view of the Date Calendar component, with a difference on the navigation among the previous and next months that must be achieved using the arrows in the calendar header.
| Keys | Description |
|---|---|
| Arrow Up, Arrow Down, Arrow Left, Arrow Right |
Moves focus among the available values |
| Page Up | Moves focus to the last day of the month |
| Page Down | Moves focus to the first day of the month |
| Home | Moves focus to first day of the week within the current month |
| End | Moves focus to last day of the week within the current month |
Date Range Picker
When interacting with the keyboard, the Date Range Picker keeps the focus on the Field component, thereby offering the same keyboard navigation support as the Date Range Field, having the changes consistently updated on the calendar component.