Accessibility

React Calendar DateTime Picker is built with accessibility in mind, following WCAG 2.1 guidelines and providing comprehensive keyboard navigation and screen reader support.

✓ WCAG 2.1 AA Compliant - Full keyboard navigation, ARIA labels, focus management, and screen reader support.

Full keyboard support allows users to navigate and interact with the calendar without using a mouse.

Try Keyboard Navigation

How to test: Tab to the input field, press Enter to open the calendar, then use arrow keys to navigate dates.

Keyboard Shortcuts

Date Picker Input

Tab - Focus input field
Enter or Space - Open calendar
Escape - Close calendar

Calendar Navigation

Arrow Keys - Navigate between dates
Enter or Space - Select date
T - Jump to today
Page Up/Down - Navigate months
Home/End - First/last day of month
Escape - Close calendar

Keyboard Navigation - Basic Calendar

Click on the calendar to focus it, then use arrow keys (↑↓←→) to navigate between dates. Press Enter or Space to select a date. This demonstrates basic keyboard navigation without opening a modal.

Component

Code

import { DtCalendar } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtCalendar
      showWeekend={true}
      todayBtn={true}
      onChange={setDate}
    />
  )
}

Result

Selected value:

null

Keyboard Navigation - Date Picker Input

Tab to focus the input field, then press Enter or Space to open the calendar modal. Once open, use arrow keys to navigate dates, Enter/Space to select, and Escape to close. This demonstrates full keyboard workflow from input to selection.

Component

Code

import { DtPicker } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtPicker
      placeholder={"Tab here, then press Enter to open"}
      showWeekend={true}
      todayBtn={true}
      onChange={setDate}
    />
  )
}

Result

Selected value:

null

Keyboard Shortcut - Jump to Today (T key)

Click on the calendar to focus it, then press the "T" key to instantly jump to today's date. This demonstrates the quick navigation shortcut for returning to the current date.

Component

Code

import { DtCalendar } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtCalendar
      showWeekend={true}
      todayBtn={true}
      onChange={setDate}
    />
  )
}

Result

Selected value:

null

Focus Trap - Modal Calendar

Click the input to open the calendar modal. Once open, press Tab repeatedly - notice how focus cycles through the calendar elements (navigation buttons, date cells, today button, clear button) and stays trapped within the modal. Press Escape to close and return focus to the input. This demonstrates proper focus management for modal dialogs.

Component

Code

import { DtPicker } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtPicker
      placeholder={"Click to open and test focus trap"}
      showWeekend={true}
      todayBtn={true}
      clearBtn={true}
      onChange={setDate}
    />
  )
}

Result

Selected value:

null

ARIA Support and Screen Readers

Comprehensive ARIA attributes ensure screen readers can properly announce the calendar state, selected dates, and available actions. All dynamic content changes are announced in real-time using ARIA live regions.

ARIA Attributes

aria-haspopup and aria-expanded on input field
role="dialog" and aria-modal on calendar modal
aria-label on navigation buttons and calendar container
aria-selected on date cells
aria-disabled on disabled dates

Screen Reader Announcements

Calendar opening/closing state
Currently focused date with full context (month, day, year, weekday)
Selected date changes
Navigation between months/years
Disabled date information
Available keyboard shortcuts

ARIA Attributes Reference

Element	ARIA Attribute	Description
Input field	`aria-haspopup`	Indicates the input opens a popup
Input field	`aria-expanded`	Indicates if calendar is open
Calendar modal	`role="dialog"`	Identifies the calendar as a dialog
Calendar modal	`aria-modal`	Indicates modal behavior
Calendar modal	`aria-label`	Descriptive label for the calendar
Navigation buttons	`aria-label`	Descriptive labels for prev/next buttons
Date cells	`aria-selected`	Indicates selected state
Disabled dates	`aria-disabled`	Indicates disabled state

ARIA Labels and Screen Reader Announcements - Interactive Example

This calendar has comprehensive ARIA attributes built-in. To test with a screen reader: 1) Enable your screen reader (NVDA, JAWS, VoiceOver, or Narrator), 2) Navigate to this calendar using Tab, 3) Use arrow keys to move between dates - the screen reader will announce each date with its full context (e.g., "December 15, 2024, Sunday, not selected"), 4) When you select a date, the screen reader announces the selection change, 5) Navigation buttons announce their purpose (e.g., "Previous month button"), 6) The calendar container is identified as a dialog with proper labels. All announcements happen in real-time as you interact with the calendar.

Component

Code

import { DtCalendar } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtCalendar
      showWeekend={true}
      todayBtn={true}
      onChange={setDate}
    />
  )
}

Result

Selected value:

null

Focus Management

Proper focus management ensures keyboard users can navigate naturally through the interface.

Focus Trap

When the calendar modal is open, focus is trapped within the calendar. Users can tab through interactive elements and use Escape to close.

Focus Restoration

When the calendar closes, focus returns to the trigger element (input field).

Focus Trap

When the calendar modal is open, focus is trapped within the calendar. Users can tab through interactive elements and use Escape to close.

// Focus trap is automatically enabled
<DtPicker
  showWeekend={true}
  todayBtn={true}
  clearBtn={true}
/>

Focus Restoration

When the calendar closes, focus returns to the trigger element (input field).

RTL (Right-to-Left) Support

Full RTL support for Persian and other right-to-left languages, including proper keyboard navigation.

Persian Calendar (RTL)

In RTL mode, arrow keys are reversed - right arrow moves backward in time, left arrow moves forward. This matches user expectations in right-to-left languages.

Persian Calendar (RTL)

<DtPicker
  calendarSystem="jalali"
  placeholder="تاریخ را انتخاب کنید"
/>

RTL Navigation: In RTL mode, arrow keys are reversed - right arrow moves backward in time, left arrow moves forward. This matches user expectations in right-to-left languages.

High Contrast Mode

The calendar respects system high contrast settings and works well with high contrast themes.

CSS Variables for Customization

Use CSS variables to ensure proper contrast ratios in different themes. The calendar supports high contrast mode through CSS custom properties.

CSS Variables for Customization

Use CSS variables to ensure proper contrast ratios in different themes:

/* High contrast theme */
.calendar-high-contrast {
  --calendar-bg: white;
  --calendar-text: black;
  --calendar-border: black;
  --calendar-selected: black;
  --calendar-selected-text: white;
}

Testing Accessibility

Tools and methods for testing the calendar's accessibility features.

Recommended Testing Tools

Automated Tools

axe-core (Chrome extension)
WAVE (Web Accessibility Evaluation Tool)
Lighthouse (Chrome DevTools)
axe DevTools

Manual Testing

Keyboard-only navigation
Screen reader testing (NVDA, JAWS, VoiceOver)
High contrast mode
Zoomed viewing (200%+)

Keyboard Testing Checklist

Tab order follows logical sequence

All interactive elements are keyboard accessible

Focus indicators are visible

Escape key closes modals

Enter/Space activate buttons

Arrow keys navigate dates appropriately