- Date pickers provide an intuitive way to select a date or range of dates.
- They consist primarily of date fields and calendar flyouts. Additional features might include a “Nights counter” which computes the total number of nights selected by a user.
- Date pickers allow our users to select a check-in and check-out date when making a reservation.
- The first active date in a date picker should be the current date or a future date.
- Previous dates should be disabled by default.
- Use style elements such as color and font weight to distinguish selectable dates from inactive ones.
- Highlight the selected dates in a range.
- For non-scrolling date pickers, provide controls for navigating from one month to the next.
- Ensure that labels are provided that let the user understand the purpose of the date picker element
- When the date picker opens, ensure that it is fully visible on the screen
- Ensure that the date picker works in predictable ways
- Make sure that the Month and Day names are read completely for screen reader users even if they are abbreviated on screen
- Date picker elements should not be able to be interacted with by keyboard or screen reader unless they are expanded
Keyboard accessibility of the date picker
- Ensure that users can navigate to the date picker. Make sure that there is a visible focus indicator that allows the user to understand that they are on a date field that will open the calendar selection element.
- When using a date picker, ensure that it can be interacted with using only the keyboard and that it behaves in predictable ways. Non-mouse users will expect that:
- The up and down arrows can be used to move to the previous and next week
- The left and right arrows change the date by one day (right, one day forward; left, one day back). When the user reaches the end of the line, continuing left will move to the previous week; continuing right will move to the next week
- Alt + Page Down should move to the same date in the next year
- Home should move the first available day of the current month (if accessing on the 12th of the month, for example, pressing home should take the user to that day)
- End should move focus to the last day of the selected month
- The Page Up key should move to the same date in the previous month (if it can be selected)
- The Page down key should move to the same date in the following month
- The esc key should close the calendar and return focus to the element that opened the date picker
- The enter key should select the date and move to the next field
Screen reader accessibility
- Ensure the full names of months and days are announced for screen reader users
- When a user selects a date, ensure that it is fully read – including the year – when a selection is made to help prevent incorrect selections
|Date/Time of Change||Who Made the Change||Change Details|
|Mar. 30 2018 8:03pm||Linked to UI Kit|
|May. 08 2017 4:25pm||Initial content entry|