Skip to content
+

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:
  • 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 toolbar id 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.