Requirements
Users should be able to:
- Navigate to a date within the picker using assistive technology.
- Select a date, either using the keyboard or with other input methods.
- Understand and apply the selected date format.
- Receive clear feedback on any errors in the date format.
Interactions
Offers different ways to input a date, typing or selecting a date from a date picker.
Mouse interactions
- The date picker is opened by clicking on the calendar icon button.
- A date is selected by clicking on a date within the calendar.
- The calendar is closed by clicking outside of the popover.
Keyboard interactions
- Enter or Space. Opens the date picker calendar when the calendar icon button is in focus.
- The focus should move to the selected date in the calendar.
- If no date has been selected, focus should move to today's date.
- Pressing Enter or Space again selects the date that is currently in focus.
- Arrow keys. Move focus between the dates.
- At the beginning of a month, pressing the up or left arrow key skips to the previous month.
- At the end of a month, pressing the down or right arrow key skips them to the next month.
- Tab. Moves focus to the close button, then the month dropdown, and lastly the year dropdown.
- Escape. Closes the calendar and returns focus to the input.
Design considerations
- Make sure the current date has a clear visual distinction from the selected date.
- Make sure any focussed state has a minimum contrast ratio of 3:1 against its background.
- Make sure any distinctions between date types have a 4.5:1 minimum contrast ratio with the background.
- Make sure the dates have a minimum target size of 44x44px.
- The calendar should have both ‘close’ and ‘apply’ buttons to allow screen reader and keyboard users to apply a date.
Development considerations
The date picker is a combobox with a dialog element for the popover. Combobox elements allow screen reader users to know that an element will have a dropdown associated with it.
The combobox
- The input should be marked up as a select-only combobox, using the input element with a role=”combobox”.
- The input should have an aria-haspopup=”dialog” attribute, to indicate the combobox will open a dialog.
- The input should have an aria-controls attribute, pointed at the id of the dialog to allow screen reader users to understand the relationships between the elements.
- The input should have an aria-expanded attribute to let screen reader users know if the list is open or closed.
- The popover should have role=”dialog” to allow screen reader users to interact with it.
- Use an aria-label to give the dialog an accessible name.
- The dialog should have an aria-modal=”true” to trap screen reader and keyboard focus within the popover.
The calendar
- The calendar is opened by mouse click, Space or Enter on the calendar button
- The calendar should be a table with a role=”grid”.
- The thead should contain the days of the week, with the week in a tr and the days in th elements.
- The dates should be contained within a tbody, with each of the dates in a td under the corresponding week day.
- Do not use a div to create the popover element. The dialog element is the allowed child of the combobox element, as per the ARIA specifications.
- If using abbreviated day names within the calendar, use the abbr element to define the full day name.
- Use scope=”col” to define the columns along with the day names.
- If the date picker has input instructions within the hint text, use aria-describedby to associate the combobox input with the hint text.
