Accessible Date Pickers

DayPicker is designed to adhere to the ARIA Authoring Practices Guide for date pickers. This includes features such as keyboard navigation, focus management, and labeling.

Depending on your design, you may need to add additional accessibility features. For instance, when working with Input Fields, there could be some restrictions depending on the level of accessibility you aim to achieve. Stay updated with best practices by following the ARIA Patterns.

Accessibility Tips

• Regularly test your date picker with a screen reader to ensure it's accessible to all users.
• Use an aria-live region in your user interface to audibly announce when a date is selected. You can use the footer prop for this purpose.
• Customize the ARIA labels with the labels prop to improve user feedback.
• Ensure that your date picker is fully navigable using only the keyboard.
• Use clear indicators for focus states to assist users who rely on keyboard navigation.
• Ensure sufficient color contrast between text and background colors.
• Consider providing instructions on how to use the date picker for first-time users or those unfamiliar with the interface.

Announcing the Selected Date

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}
    />
  );
}

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

Please pick a date for the meeting.

Autofocusing the Calendar

DayPicker manages focus automatically when the user interacts with the calendar. However, for better accessibility, you may need to autofocus the calendar when it opens. To do this, use 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.
Arrow Right	Move focus to the next day.
Arrow Down	Move focus to the next week.
Arrow Left	Move focus to the previous day.
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.