|
| 1 | +--- |
| 2 | +productId: x-date-pickers |
| 3 | +title: Date and Time Pickers - Accessibility |
| 4 | +githubLabel: 'component: pickers' |
| 5 | +packageName: '@mui/x-date-pickers' |
| 6 | +--- |
| 7 | + |
| 8 | +# Accessibility |
| 9 | + |
| 10 | +<p class="description">The Date and Time Pickers have complete accessibility support, including built-in keyboard navigation that follows international standards.</p> |
| 11 | + |
| 12 | +## Guidelines |
| 13 | + |
| 14 | +Common conformance guidelines for accessibility include: |
| 15 | + |
| 16 | +- Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) |
| 17 | +- US: |
| 18 | + - [ADA](https://www.ada.gov/) - US Department of Justice |
| 19 | + - [Section 508](https://www.section508.gov/) - US federal agencies |
| 20 | +- Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act) |
| 21 | + |
| 22 | +WCAG 2.1 has three levels of conformance: A, AA, and AAA. |
| 23 | +Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support. |
| 24 | + |
| 25 | +The WAI-ARIA Authoring Practices includes examples on [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) and [Date Picker Spin Button](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/) patterns, which provide valuable information on how to optimize the accessibility of these components. |
| 26 | + |
| 27 | +## Screen reader compatibility |
| 28 | + |
| 29 | +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. |
| 30 | + |
| 31 | +## Keyboard support |
| 32 | + |
| 33 | +The Date and Time Pickers consist of different associations of Field, Calendar, and Clock components. |
| 34 | +Each of these components is designed to respond intuitively to keyboard interactions, providing extensive keyboard navigation support. |
| 35 | + |
| 36 | +### Fields |
| 37 | + |
| 38 | +The following table describes the keyboard support for all [field components](/x/react-date-pickers/fields/): |
| 39 | + |
| 40 | +| Keys | Description | |
| 41 | +| --------------------------------------------------------------------: | :------------------------------------------- | |
| 42 | +| <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among date/time sections | |
| 43 | +| <kbd class="key">Arrow Up</kbd> | Increases focused section value by 1 | |
| 44 | +| <kbd class="key">Arrow Down</kbd> | Decreases focused section value section by 1 | |
| 45 | +| <kbd class="key">Page Up</kbd> | Increases focused section value section by 5 | |
| 46 | +| <kbd class="key">Page Down</kbd> | Decreases focused section value section by 5 | |
| 47 | +| <kbd class="key">Home</kbd> | Sets focused section to the minimal value | |
| 48 | +| <kbd class="key">End</kbd> | Sets focused section to the maximal value | |
| 49 | + |
| 50 | +### Date Calendar |
| 51 | + |
| 52 | +Among the [available view components](https://mui.com/x/react-date-pickers/date-calendar/#views), `day` is the only one that implements specific keyboard support: |
| 53 | + |
| 54 | +| Keys | Description | |
| 55 | +| -------------------------------: | :-------------------------------------------------------------- | |
| 56 | +| <kbd class="key">Page Up</kbd> | Moves calendar to next month, keeping focus on the same day | |
| 57 | +| <kbd class="key">Page Down</kbd> | Moves calendar to previous month, keeping focus on the same day | |
| 58 | +| <kbd class="key">Home</kbd> | Moves focus to the first day of the week | |
| 59 | +| <kbd class="key">End</kbd> | Moves focus to the last day of the week | |
| 60 | + |
| 61 | +### Date Picker |
| 62 | + |
| 63 | +The [Date Picker](/x/react-date-pickers/date-picker/) combines the functionalities of the Date Field and Date Calendar components. |
| 64 | + |
| 65 | +Depending on which component is in focus, the Picker will provide the corresponding keyboard support, either from [Date Field](/x/react-date-pickers/accessibility/#fields) or [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar). |
| 66 | + |
| 67 | +### Date Range Calendar |
| 68 | + |
| 69 | +The [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) implements a similar keyboard support as the day view of the [Date Calendar](/x/react-date-pickers/accessibility/#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. |
| 70 | + |
| 71 | +| Keys | Description | |
| 72 | +| --------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------ | |
| 73 | +| <kbd class="key">Arrow Up</kbd>, <kbd class="key">Arrow Down</kbd>,<br> <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among the available values | |
| 74 | +| <kbd class="key">Page Up</kbd> | Moves focus to the last day of the month | |
| 75 | +| <kbd class="key">Page Down</kbd> | Moves focus to the first day of the month | |
| 76 | +| <kbd class="key">Home</kbd> | Moves focus to first day of the week within the current month | |
| 77 | +| <kbd class="key">End</kbd> | Moves focus to last day of the week within the current month | |
| 78 | + |
| 79 | +### Date Range Picker |
| 80 | + |
| 81 | +When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields), having the changes consistently updated on the calendar component. |
0 commit comments