Date Picker
An input component for selecting dates with a calendar UI
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsConnect format hint to input
Link the expected date format hint to the input via aria-describedby.
Calendar popup has dialog role
The calendar popup must have role="dialog" with aria-label or aria-labelledby.
ARIA on calendar grid
The calendar grid must use appropriate roles (grid, gridcell) and labels.
Full keyboard navigation
Arrow keys must navigate days; Enter/Space must select a date.
Live region for month/year changes
Announce month/year changes to screen readers using an aria-live region.
Allow direct text input
Allow users to type a date directly instead of requiring calendar navigation.
Show selected date in trigger
Reflect the selected date in the trigger button's accessible label.
Mark disabled dates
Indicate unavailable dates with aria-disabled="true".
Do not require the calendar UI only
Some users cannot operate a calendar widget; always provide a text input alternative.
Do not show only numbers in date cells
Day cells must have accessible names that include full date context (e.g., "March 1, 2025").
Additional checks
Use @mui/x-date-pickers
Use @mui/x-date-pickers instead of a custom date input for built-in accessibility support.
Code sample
Implementation notes
- –Setting adapterLocale on LocalizationProvider displays the calendar UI in the correct locale.
- –@mui/x-date-pickers automatically handles ARIA for keyboard navigation and screen readers.
- –Customize input field accessibility attributes via slotProps.textField.