Syncfusion AI Assistant

How can I help you?

Accessibility in Blazor Scheduler Component

30 Jun 202610 minutes to read

The Blazor Scheduler component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor Scheduler component is outlined below.

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

WAI-ARIA attributes

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.

The following ARIA attributes are used in the Scheduler:

Attributes Purpose
role=”main” Attribute added to the Scheduler element describes the actual role of the element and denote it as a main and unique content.
role=”button” Attribute is assigned to the appointments of Scheduler, to denote it as a clickable element.
aria-label Attribute is set to the Scheduler parent element and its default value is Scheduler’s current date. On every time, the date is navigated, this attribute is updated with appropriate current date values. It is also assigned to other scheduler UI elements such as previous and next date navigation buttons depicting its purpose, div element displaying date range in the header bar and appointment elements.
aria-labelledby It indicates editor dialog title to the user through assistive technologies.
aria-describedby It indicates editor dialog content description to the user through assistive technologies.
aria-disabled Attribute is set to the appointment element to indicates the disabled state of the Scheduler.

The Syncfusion® Blazor 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

  • 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 utilizing 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, which automated verification tools flag as a layout or state mismatch.

  • The tabbable element’s role ‘cell’ is not a widget role:
    The tabbable element’s role cell 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 the multiple resource Timeline views.

Keyboard interaction

All the Scheduler actions can be controlled via keyboard keys and is availed by using AllowKeyboardInteraction property which is set to true by default. The applicable key combinations and its relative functionalities are listed below.

Windows Mac Actions
Alt + J ⌥ + J Focuses the Scheduler [Provided from application end].
Tab Tab Focuses the first or active item on the scheduler header bar and then moves the focus to the next available event elements. If no events present, then focus moves out of the component.
Shift + Tab ⇧ + Tab Reverse focusing of the Tab functionality. Inverse focusing of event elements from the last one and then moves onto the first or active item on Scheduler header bar and then moves out of the component.
Ctrl + Shift + Arrows (↑ , → , ↓ , ←) ⌘ + ⇧ + Arrows (↑ , → , ↓ , ←) Focuses the event element and then moves the focus to the next available event elements between the resources.
Escape Escape Closes any of the popup that are in open state.
↑ , → , ↓ , ← ↑ , → , ↓ , ← To move onto the next available cells in either of the needed directions (left, right, top and right)
Shift + Arrow ⇧ + Arrows (↑ , → , ↓ , ←) For multiple cell selection on either direction.
Delete Delete Deletes one or more selected events.
Ctrl + Click on events ⌘ + Click To select multiple events.
Alt + Number (from 1 to 6) ⌥ + Number (from 1 to 6) To switch between the views on Scheduler.
Ctrl + ← ⌘ + ← To navigate to the previous date period.
Ctrl + → ⌘ + → To navigate to the next date period.
← or → ← or → On pressing any of these keys when focus is currently on the Scheduler header bar, moves the focus to the previous or next items in the header bar.
Space or Enter Space or Enter It activates any of the focused items.
Page Up & Page Down Page Up & Page Down To scroll through the work cells area.
Home Home To move the selection to the first cell of Scheduler.
F12 F12 To have the inline option for both cells and events.
Shift + Alt + Y ⇧ + ⌥ + Y To navigate to today date.
Shift + Alt + N ⇧ + ⌥ + N To open editor window.

Ensuring accessibility

The Blazor Scheduler component’s accessibility levels are ensured through an axe-core software tool during automated testing.

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

See also