Accessibility in ASP.NET Core Scheduler
The Scheduler has been designed based on the WAI-ARIA specifications, thus applying the appropriate ARIA roles, states and properties for the Scheduler elements. It is also available with a built-in keyboard navigation support, making it easier for the people who use assistive technologies or who completely rely on the Keyboard support. As per the accessibility standard, the navigated dates, views and other interactive actions performed on the Scheduler will be read out to the target users who use assistive technologies such as screen readers.
The Scheduler makes use of the most required ARIA attributes such as aria-label and role to support the accessibility in it. To be more accurate, it must be used with an ARIA compliant browser along with the screen reader running from backend.
The accessibility compliance for the Schedule component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | AA |
| Section 508 Support |  |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker 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.ARIA attributes
The Scheduler parent element is assigned a role of main to denote it as the main content of the component and a unique element of the entire document.
The following ARIA attributes are used in the Scheduler.
| Attributes | Description |
|---|---|
| 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 indicate the disabled state of the Scheduler. |
Keyboard interaction
All the Scheduler actions can be controlled via keyboard keys by using the allowKeyboardInteraction property which is set to true by default. The following are the standard keys that work on Scheduler.
| Keys | Description |
|---|---|
| Alt + j | Focuses the Scheduler element [provided from application end]. |
| Tab | Focuses the first or active item on the Scheduler header bar and then move the focus to the next available event elements. If no events present, then focus moves out of the component. |
| Shift + Tab | Reverses the Tab key functionality. It shifts focus 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 of the popup that are in open state. |
| Arrow | Moves to the next available cells in the required directions (left, right, top, and down). |
| Shift + Arrow | For multiple cell selection on either direction. |
| Delete | Deletes one or more selected events. |
| Ctrl + Click on events | Selects multiple events. |
| Alt + Number (from 1 to 6) | Switches between the Scheduler views. |
| Ctrl + Left Arrow | To navigate to the previous date period. |
| Ctrl + Right Arrow | To navigate to the next date period. |
| Left or Right Arrow | On pressing any of these keys, when focus is currently on the Schedule header bar, moves the focus to the previous or next items in the header bar. |
| Space or Enter | It activates any of the focused items. |
| Page Up & Page Down | To scroll through the work cells area. |
| Home | To move the selection to the first cell of Scheduler. |
| Shift + Alt + Y | To navigate to today date. |
| Shift + Alt + N | To open editor window. |
Note: You can refer to our ASP.NET Core Scheduler feature tour page for its feature highlights. You can also explore our ASP.NET Core Scheduler example to learn how to present and manipulate data.
Ensuring accessibility
The Scheduler component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools 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.