Accessibility in the React Scheduler
The Scheduler component complies with major accessibility standards including ADA, Section 508, and WCAG 2.2, ensuring an inclusive experience for all users.
The accessibility compliance summary for the Scheduler component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Validation |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.
WAI-ARIA attributes
The Scheduler component implements WAI-ARIA patterns to ensure accessibility compliance. The following ARIA attributes enhance interaction and navigation:
| Selector | Attributes | Purpose |
|---|---|---|
| .sf-scheduler | role="application" | Identifies the component as an interactive application. |
aria-label="Scheduler" | Provides an accessible name for screen readers. | |
tabindex="0" | Enables keyboard focus on the Scheduler component. | |
| .sf-appointment | role="button" | Marks appointments as interactive controls that open event details when activated. |
aria-label | Announces appointment details (subject, location, time) to assistive technologies. | |
tabindex | Includes appointments in keyboard tab order for navigation and interaction. |
Note: The Scheduler toolbar follows the ToolBar accessibility specification.
Keyboard interaction
The Scheduler component supports comprehensive keyboard navigation following WAI-ARIA guidelines, enabling users to navigate and manage events entirely via keyboard.
| Windows | macOS | Action |
|---|---|---|
| Shift + Alt + Y | Shift + Option + Y | Jump to today's date. |
| Ctrl + Left Arrow | Command + Left Arrow | Move to the previous date period. |
| Ctrl + Right Arrow | Command + Right Arrow | Move to the next date period. |
| Alt + Number (1–6) | Option + Number (1–6) | Switch between Scheduler views. |
| Home | Fn + ← | Select the first cell in the Scheduler. |
| PageUp | ← | Scroll up through the work cells area. |
| PageDown | → | Scroll down through the work cells area. |
| Tab | Tab | Move focus through the header bar and event elements. In dialogs, cycle forward through controls. |
| Shift + Tab | Shift + Tab | Move focus backward through event elements and header bar. In dialogs, cycle backward through controls. |
| Enter | Enter | Open the quick info popup for the selected cell or event. |
| Delete | Delete | Delete the selected event. |
| Escape | Escape | Close any open popup or dialog. |
Disable keyboard navigation
Set keyboardNavigation to false to disable all built-in keyboard interactions in the Scheduler component.