Code example
Common baseline
Connect 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").
Design system implementations
Additional checks
Use the @mui/x-date-pickers package
MUI DatePicker lives in the separate @mui/x-date-pickers package. LocalizationProvider and a date adapter (e.g., AdapterDateFns) are required.
Pass accessibility props via slotProps.textField
Use slotProps.textField to pass helperText, required, and error props to the underlying TextField for proper screen reader connections.
Provide format hint via helperText
Set slotProps.textField.helperText to show the expected date format so users can predict what to enter. It is auto-connected via aria-describedby.
Code sample
Implementation notes
- –@mui/x-date-pickers splits the date input into segments (month/day/year) and automatically handles keyboard navigation and screen reader ARIA.
- –Place LocalizationProvider once at the app root rather than wrapping each individual DatePicker.
- –Use disablePast, disableFuture, minDate, or maxDate to limit the selectable range — aria-disabled is applied to excluded dates automatically.