Accessible Date Pickers

DayPicker follows the ARIA Authoring Practices Guide for date pickers, including features like keyboard navigation, focus management, and labeling.

Depending on your design, you might need to add more accessibility features. For example, when using Input Fields, there may be some limitations based on your accessibility goals. Keep up with best practices by following the ARIA Patterns.

Accessibility Tips

• Test your date picker regularly with a screen reader to ensure accessibility.
• Use an aria-live region to announce when a date is selected, such as using the footer prop.
• Customize ARIA labels with the labels prop for better user feedback.
• Maintain sufficient color contrast between text and background.
• Offer instructions for first-time users or those unfamiliar with the date picker.

Accessibility Props

Prop Name	Type	Description
labels	Labels	Map of the ARIA labels used within DayPicker for better accessibility.
footer	ReactNode | string	Add a footer to the calendar, which can act as a live region to announce updates.
role	application | dialog	Set the ARIA role for the container. Use application for a more interactive widget or dialog for a modal-like date picker.
aria-label	string	The label to use for the container when a role is set, providing a descriptive text for screen readers.
aria-labelledby	string	Reference another element that describes the calendar, such as a heading or external label, allowing assistive tech to announce that element as the calendar title.
autoFocus	boolean	Autofocus the calendar when it opens, improving keyboard navigation.

Autofocusing the Calendar

DayPicker automatically manages focus when users interact with the calendar. To enhance accessibility, you can autofocus the calendar when it opens by using the autoFocus prop:

<DayPicker mode="single" autoFocus />

Keyboard Navigation

DayPicker supports keyboard navigation to make it easier for users to navigate the calendar. The following keys are supported:

Keys	Function
Arrow Up	Move focus to the previous week.
Shift + Arrow Up	Move focus to the previous year.
Arrow Right	Move focus to the next day.
Shift + Arrow Right	Move focus to the next month.
Arrow Down	Move focus to the next week.
Shift + Arrow Down	Move focus to the next year.
Arrow Left	Move focus to the previous day.
Shift + Arrow Left	Move focus to the previous month.
Page Up	Move focus to the previous month.
Page Down	Move focus to the next month.
Shift + Page Up	Move focus to the previous year.
Shift + Page Down	Move focus to the next year.
Home	Move focus to the start of the week.
End	Move focus to the end of the week.
Enter/Space	Select the focused day.

Getting Help With Accessibility

Accessibility is an evolving field. If you find any accessibility issues with DayPicker, please open an issue. Your feedback helps improve our library's accessibility.

Check out the current accessibility issues.