Angular Scheduler - Accessibility

Accessibility Features Overview

NOTE
The overall accessibility level of your application depends on the Scheduler features you use.
Accessibility Requirement Support Level
Right-to-Left Support
Keyboard Navigation Support
Screen Reader Support
Contrast Color Theme
Mobile Device Support
Lighthouse Accessibility Validation
Axe Accessibility Validation
WAVE Accessibility Validation
Section 508 Support
WCAG 2.x Support
  • - All component features meet the requirement
  • - Some component features may not meet the requirement
  • - Accessibility requirement is not supported

Accessibility Standards Compliance

The Scheduler component meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:

Section 508 criteria WCAG 2.x criteria Exception description
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.3.1 Info and Relationships (Level A) Scheduler does not include accessibility information about recurrence section in the editing popup.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.4.3 Contrast (Minimum) (Level AA)
1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)		 Scheduler does not support Windows High Contrast themes.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 2.1.1 Keyboard (Level A)
11.5.2.13 Tracking of focus and selection attributes
  • Virtual scrolling does not support keyboard navigation.
  • Users cannot add an appointment via keyboard navigation.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 2.1.2 No Keyboard Trap (Level A) Scheduler has keyboard trap in appointments navigation if virtual scrolling is enabled.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 3.2.2 On Input (Level A) Scheduler changes the context when moving between:
  • Recurrence editor in the editing popup
  • "End repeat" radio group items
  • "Repeat on" weekday button group

The component also complies with the European Accessibility Act (EAA) and Americans with Disabilities Act (ADA) directives.

Keyboard Navigation

A user can use the following keys to interact with the Scheduler component:

UI component Element Key / Key Combination Action
Scheduler UI component Tab / Shift+Tab Shifts focus between appointments and the Scheduler toolbar area.
Toolbar Left Arrow or Right Arrow Shifts focus between toolbar items.
Scheduler UI component Shift + Mouse Wheel Scrolls content left/right if horizontal scrolling is taking place.
View Switcher Left Arrow or Right Arrow Switches between scheduler views.
Date Navigator Tab / Shift+Tab Shifts focus to the next/previous element within the navigator.
Date Navigator Enter or Space Selects the focused element of the navigator.
Popup Window Tab / Shift+Tab Shifts focus to the next/previous element within the window. Editors within the window are controlled by their own keyboard shortcuts.
Appointments Tab / Shift+Tab Shifts focus to the next/previous appointment.
Appointments Enter or Space Invokes the appointment edit form.
Appointments Delete Deletes the current appointment.
Appointments Home Moves focus to the first appointment in the view.
Appointments End Moves focus to the last appointment in the view.
Appointment Tooltip Tab / Shift+Tab Shifts focus between tooltip elements.
Appointment Tooltip Enter or Space Selects the focused element in the tooltip.

To navigate between toolbar items using the Tab key, disable allowKeyboardNavigation in Scheduler Toolbar instances. Call dxToolbar.defaultOptions() as follows:

jQuery
index.js
DevExpress.ui.dxToolbar.defaultOptions({
    options: {
        onInitialized(e) {
            if ($(e.element).closest('.dx-scheduler').length) {
                e.component.option('allowKeyboardNavigation', false);
            }
        }
    }
})
Angular
app.component.ts
import dxToolbar from "devextreme/ui/toolbar";
import { type DxToolbarTypes } from "devextreme-angular/ui/toolbar";
// ...
export class AppComponent {
    constructor() {
        dxToolbar.defaultOptions({
            options: {
                onInitialized(e: DxToolbarTypes.InitializedEvent) {
                    if (e.element?.closest('.dx-scheduler')) {
                        e.component?.option('allowKeyboardNavigation', false);
                    }
                }
            }
        })
    }
}
Vue
App.vue
<script setup lang="ts">
import dxToolbar from "devextreme/ui/toolbar";
import { type DxToolbarTypes } from "devextreme-vue/toolbar";

dxToolbar.defaultOptions({
    options: {
        onInitialized(e: DxToolbarTypes.InitializedEvent) {
            if (e.element?.closest('.dx-scheduler')) {
                e.component?.option('allowKeyboardNavigation', false);
            }
        }
    }
});
</script>
React
App.tsx
import dxToolbar from "devextreme/ui/toolbar";
import { type ToolbarTypes } from "devextreme-react/toolbar";

dxToolbar.defaultOptions({
    options: {
        onInitialized(e: ToolbarTypes.InitializedEvent) {
            if (e.element?.closest('.dx-scheduler')) {
                e.component?.option('allowKeyboardNavigation', false);
            }
        }
    }
});

Replace .dx-scheduler with a component ID or class to modify keyboard navigation behavior in a specific component only.

IMPORTANT
If you disable allowKeyboardNavigation, the DevExtreme Toolbar no longer follows the W3C ARIA APG Toolbar Pattern. Your application will be less accessible to users who rely on keyboard navigation.

Screen Reader Support

The Scheduler component supports screen readers and complies to WAI-ARIA standards. Known exceptions are listed in the Accessibility Standards Compliance topic.