Accessibility

React Scheduler Pro targets WCAG 2.1 AA compliance. The scheduler is designed to be fully usable with keyboards, screen readers, and assistive technologies.

The scheduler uses proper ARIA roles and attributes:

• role="grid" on the time grid and month grid
• role="gridcell" on each time slot
• role="button" on event items
• aria-label on all interactive elements with descriptive text
• aria-current="true" on the active view button
• aria-expanded on events with open popovers
• aria-haspopup="dialog" on events that open popovers
• aria-live="polite" for navigation announcements

• Visible focus indicators: All interactive elements show a clear blue outline on focus
• Focus trap: Modals and popovers trap focus inside them
• Focus restoration: When a modal/popover closes, focus returns to the triggering element

• Navigation changes are announced via a live region
• Events include descriptive labels: event name, start time, end time
• Time slots include full date and time in their labels
• "Show more" buttons announce the count of hidden events

Focus indicators use the primary color and are visible in both light and dark modes:

.scheduler *:focus-visible {
  outline: 2px solid var(--rsp-primary, #0079ff);
  outline-offset: 2px;
}

You can customize focus styles via CSS variables:

:root {
  --rsp-primary: #6366f1; /* Changes focus ring color too */
}

We recommend using these tools to verify accessibility:

• axe DevTools — Browser extension for automated a11y testing
• VoiceOver (macOS) or NVDA (Windows) — Screen reader testing
• Keyboard only — Navigate the scheduler using only Tab, arrows, Enter, Escape