Skip to main content

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, utilizing the footer prop.
  • Customize ARIA labels with the labels prop for better user feedback.
  • Ensure the date picker is fully navigable with just the keyboard.
  • Provide clear focus indicators for keyboard users.
  • Maintain sufficient color contrast between text and background.
  • Offer instructions for first-time users or those unfamiliar with the date picker.

Here is an example of an accessible date picker with a live region that announces the selected date using the footer prop.

./AccessibleDatePicker.tsx
import { format } from "date-fns";
import { DayPicker } from "react-day-picker";

export function AccessibleDatePicker() {
const [meetingDate, setMeetingDate] = React.useState<Date | undefined>(
undefined
);

const footer = meetingDate
? `Meeting date is set to ${format(meetingDate, "PPPP")}`
: "Please pick a date for the meeting.";

const labels = {
labelCaption: () => "Select a date for the meeting",
labelDay: (date, modifiers) => {
return modifiers.selected
? `Selected Meeting Date: ${format(date, "PPP")}`
: "";
}
};

return (
<DayPicker
mode="single"
onSelect={setMeetingDate}
selected={meetingDate}
labels={labels}
footer={footer}
/>
);
}
October 2024
SuMoTuWeThFrSa

Autofocusing the Calendar​

DayPicker manages focus automatically when users interact with the calendar. For better accessibility, you might want to autofocus the calendar when it opens. Use the autoFocus prop to achieve this:

<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:

KeysFunction
Arrow UpMove focus to the previous week.
Arrow RightMove focus to the next day.
Arrow DownMove focus to the next week.
Arrow LeftMove focus to the previous day.
Page UpMove focus to the previous month.
Page DownMove focus to the next month.
Shift + Page UpMove focus to the previous year.
Shift + Page DownMove focus to the next year.
HomeMove focus to the start of the week.
EndMove focus to the end of the week.
Enter/SpaceSelect 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.