Accessibility in React Scheduler

The Scheduler is designed based on the WAI-ARIA specifications and applies the appropriate ARIA roles, states, and properties to Scheduler elements. It also includes built-in keyboard navigation support, which improves usability for users of assistive technologies or keyboard-only input. As part of accessibility support, navigated dates, views, and other interactive actions performed within the Scheduler are announced to screen readers.

The Scheduler uses essential ARIA attributes such as aria-label and role to ensure accessibility. For accurate interpretation, use it with an ARIA-compliant browser and a running screen reader.

The accessibility compliance for the Schedule component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

ARIA attributes

The Scheduler’s parent element is assigned with a role of main, to denote it as the main content of a component as well as a unique element of the entire document.

The following ARIA attributes are used in the Scheduler:

Attributes Description
role=”main” Added to the Scheduler element to identify it as the main content of the document.
role=”button” Assigned to Scheduler appointments to identify them as clickable elements.
aria-label Set on the Scheduler parent element. Its default value is the Scheduler’s current date, and it updates whenever the date changes. It is also assigned to other Scheduler UI elements such as previous and next navigation buttons, the date range text in the header bar, and appointment elements.
aria-labelledby Indicates the editor dialog title to assistive technologies.
aria-describedby Indicates the editor dialog content description to assistive technologies.
aria-disabled Set on appointment elements to indicate the disabled state of the Scheduler.

The Syncfusion® React Scheduler component uses a complex table structure to render calendar views such as Day, Week, and Month. As a result, automated accessibility tools such as IBM Equal Access Accessibility Checker may report the following warnings:

  • Table has no headers identified: Some tables rendered by the Scheduler do not have headers explicitly identified, which may trigger warnings in accessibility checkers.

  • Complex table does not have headers for each cell properly defined with ‘header’ or ‘scope’: The Scheduler’s internal table structure may not define headers for every cell using the header or scope attributes, leading to additional warnings.

  • Label text is located after its associated text input or <select> element: Certain form fields and dropdowns within the built-in editor windows place the label after the input control, which may flag standard layout order validation.

  • The ‘for’ attribute is not the ‘id’ of a valid element: In the built-in Scheduler editor window with multiple resources enabled, internal reference links between a label and its input component may trigger missing reference warnings in automated checkers.

  • Accessible name does not match or contain the visible label text: Certain interactive elements within the component may have mismatched programmatic names compared to their displayed labels, which can be flagged by label-matching verification tools. This behavior occurs specifically in the Month view date headers and the Agenda view appointment elements.

  • Text contrast does not meet the minimum WCAG AA requirements: Certain elements with specific text sizes and weights may fail standard color contrast ratio checks under default theme settings. This behavior occurs specifically in Adaptive mode when using multiple resources.

  • The combobox ‘aria-expanded’ attribute is false, but the combobox popup is visible: The aria-expanded attribute remains false even when the combobox popup is visible in the editor window drop-down components because the component uses a custom composite layout to render standard dropdown elements. Automated verification tools may flag this as a layout or state mismatch.

  • The tabbable element’s role ‘cell’ is not a widget role:
    The tabbable element’s cell role is not a widget role, which can trigger errors in automated accessibility checkers because a standard cell role is not recognized as an interactive widget by default. This behavior occurs specifically in multiple resource Timeline views.

Keyboard interaction

All Scheduler actions can be controlled via keyboard using the allowKeyboardInteraction property, which is true by default. The following standard keys are supported within the Scheduler:

Keys Description
Alt + j Focuses the Scheduler element provided by the application.
Tab Focuses the first or active item on the Scheduler header bar and then moves to the next available event elements. If no events are present, focus moves out of the component.
Shift + Tab Reverses the focus order of the Tab key. It moves from the last event element to the first or active item on the Scheduler header bar and then moves out of the component.
Enter Opens the quick info popup on the selected cells or events.
Escape Closes any open popup.
Arrow Moves to the next available cell in the required direction.
Shift + Arrow Selects multiple cells in either direction.
Delete Deletes one or more selected events.
Ctrl + Click on events Selects multiple events.
Alt + Number (1 to 6) Switches between Scheduler views.
Ctrl + Left Arrow Navigates to the previous date period.
Ctrl + Right Arrow Navigates to the next date period.
Left or Right Arrow When focus is on the Scheduler header bar, moves focus to the previous or next item in the header bar.
Space or Enter Activates the focused item.
Page Up and Page Down Scrolls through the work cells area.
Home Moves the selection to the first cell of the Scheduler.
Shift + Alt + Y Navigates to today.
Shift + Alt + N Opens the editor window.

You can refer to our React Scheduler feature tour page for a quick overview of its capabilities. You can also explore our React Scheduler example to learn how to present and manipulate data.

Ensuring accessibility

The Scheduler component’s accessibility levels are verified through automated testing using tools such as accessibility-checker and axe-core.

The accessibility compliance of the Scheduler component is demonstrated in the following sample. Open the sample in a new window to evaluate the Scheduler component with accessibility tools.

See also