Skip to content

accessibility.mdx

Latest commit

 

History

History
105 lines (82 loc) · 4.73 KB

accessibility.mdx

File metadata and controls

105 lines (82 loc) · 4.73 KB
sidebar_position 6

Accessibility

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 new 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 the 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. For this purpose, you can use the footer prop.
  • Specify the ARIA role of the date picker with the role prop to provide context to assistive technologies.
  • Customize the ARIA labels with the labels prop to improve the clarity of instructions and feedback provided to the user.
  • Ensure that the date picker is fully navigable using only the keyboard. This includes selection, navigation between months, and closing the date picker.
  • Use clear visual indicators for focus states to assist users who rely on keyboard navigation.
  • Provide alternative text for any icons used in the date picker.
  • Ensure sufficient color contrast between text and background colors to assist users with visual impairments.
  • Consider providing instructions for how to use the date picker for first-time users or those unfamiliar with the interface.

Example

An accessible date picker with a live region that announces the selected date using the footer prop.

import React, { useState } from "react";

import { format } from "date-fns";
import { DayPicker } from "react-day-picker";

export function AccessibleDatePicker() {
  const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
  return (
    <div role="group" aria-labelledby="meeting-date">
      <h2 id="meeting-date">Meeting Date</h2>
      <DayPicker
        mode="single"
        onSelect={setMeetingDate}
        selected={meetingDate}
        labels={{
          labelCaption: () => "Select a date for the meeting",
          labelDay: (date, modifiers) => {
            return modifiers.selected
              ? `Selected Meeting Date: ${format(date, "PPP")}`
              : "";
          }
        }}
        footer={
          <p aria-live="polite">
            {meetingDate
              ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
              : "Please pick a date for the meeting."}
          </p>
        }
      />
    </div>
  );
}

Autofocusing the Calendar {#autofocus}

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, you can 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 Top Move focus to the previous week
Arrow Right Move focus to the next day
Arrow Bottom 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

Reporting Issues With Accessibility

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

Check out the current accessibility issues.