How can I help you?
Accessibility in Vue Schedule Component
3 Feb 20267 minutes to read
The Schedule component is designed in accordance with WAI‑ARIA specifications, applying appropriate ARIA roles, states, and properties to all relevant elements. Built‑in keyboard navigation support is provided to ensure effective interaction for individuals relying on assistive technologies or keyboard input. According to accessibility standards, navigated dates, views, and interactive actions performed on the component are announced by screen reader software. The component uses essential ARIA attributes such as aria-label and role to ensure accessibility compliance. For accurate interpretation, an ARIA‑compliant browser running with an active screen reader is required.
The accessibility compliance for the Schedule 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 Checker Validation | |
| Axe-core 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.ARIA attributes
The Scheduler 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” | 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. |
Keyboard Interaction
All Schedule component actions can be performed using keyboard input when the allowKeyboardInteraction property is set to true (enabled by default). The following keys are supported:
| 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 | Reverse focusing of the Tab key functionality. Inverse focusing of event elements from the last one and then move onto the first or active item on 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 | To move onto the next available cells in either of the needed directions. (left, right, top and right) |
| Shift + Arrow | For multiple cell selection on either direction. |
| Delete | Deletes one or more selected events. |
| Ctrl + Click on events | To select multiple events. |
| Alt + Number (from 1 to 6) | To switch between the views of Scheduler. |
| 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. |
Refer to the Vue Scheduler feature tour page for comprehensive feature representations. Additional examples are available in the Vue Scheduler example page, demonstrating data presentation and manipulation.
Ensuring Accessibility
Accessibility levels for the Schedule component are validated through automated testing tools such as accessibility-checker and axe-core. Accessibility compliance can be evaluated using the following sample: open the sample to review the component with accessibility tools.