Examples
Accessibility considerations
This section is dedicated to providing guidance on considerations that users of the system should keep in mind to ensure the accessibility of their designs. While these considerations may not be built directly into the components, they are crucial elements that users have control over. These may include:
- Content: Ensuring the content is clear, concise, and easily understandable.
- Aria labels: Using Aria labels to make the design more accessible to those with assistive technologies.
- Alt states: Providing alternative text for images or non-text content so that it can be understood by people with visual impairments or those using screen readers.
Keyboard interaction
The datepicker supports the following keyboard shortcuts:
|
Keyboard Shortcut |
Action |
|---|---|
|
Alt + Down Arrow |
Open the calendar pop-up |
|
Escape |
Close the calendar pop-up |
In month view:
|
Shortcut |
Action |
|---|---|
|
Left Arrow |
Go to previous day |
|
Right Arrow |
Go to next day |
|
Up Arrow |
Go to same day in the previous week |
|
Down Arrow |
Go to same day in the next week |
|
Home |
Go to the first day of the month |
|
End |
Go to the last day of the month |
|
Page up |
Go to the same day in the previous month |
|
Alt + Page up |
Go to the same day in the previous year |
|
Page Down |
Go to the same day in the next month |
|
Alt + Page Down |
Go to the same day in the next year |
|
Enter |
Select current date |
In year view:
|
Shortcut |
Action |
|---|---|
|
Left Arrow |
Go to previous month |
|
Right Arrow |
Go to next month |
|
Up Arrow |
Go up a row (back 4 months) |
|
Down Arrow |
Go down a row (forward 4 months) |
|
Home |
Go to the first month of the year |
|
End |
Go to the last month of the year |
|
Page Up |
Go to the same month in the previous year |
|
Alt + Page up |
Go to the same month 10 years back |
|
Page Down |
Go to the same month in the next year |
|
Alt + Page Down |
Go to the same month 10 years forward |
|
Enter |
Select current month |
In multi-year view:
|
Shortcut |
Action |
|---|---|
|
Left Arrow |
Go to previous year |
|
Right Arrow |
Go to next year |
|
Up Arrow |
Go up a row (back 4 years) |
|
Down Arrow |
Go down a row (forward 4 years) |
|
Home |
Go to the first year in the current range |
|
End |
Go to the last year in the current range |
|
Page up |
Go back 24 years |
|
Alt + Page up |
Go back 240 years |
|
Page Down |
Go forward 24 years |
|
Alt + Page Down |
Go forward 240 years |
|
Enter |
Select current year |