Scheduler / Accessibility
material theme

Accessibility

The Scheduler is accessible by screen readers and provides WAI-ARIA support.

WAI-ARIA Support

The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation and is tested against the popular screen readers.

Section 508

The Scheduler is compliant with the Section 508 requirements.

Adding Accessible Summary

To add context for visually impaired users, make the Scheduler a region and add an aria-label to it. Screen readers will announce the label every time the focus moves to the region.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Scheduler,
    AgendaView,
    TimelineView,
    DayView,
    WeekView,
    MonthView
} from '@progress/kendo-react-scheduler';
import { useInternationalization } from '@progress/kendo-react-intl';
import { sampleData, displayDate } from './events-utc.js';

const App = () => {
    const intl = useInternationalization();
    const [date, setDate] = React.useState(displayDate);

    const handleDateChange = React.useCallback(
        (event) => {
            setDate(event.value)
        },
        [setDate])

    return (
        <Scheduler
            role="region"
            ariaLabel={`Meetings for ${intl.formatDate(date, "d")}`}

            data={sampleData}
            date={date}
            onDateChange={handleDateChange}
            editable={true}
        >
            <AgendaView />
            <TimelineView />
            <DayView />
            <WeekView />
            <MonthView />
        </Scheduler>
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Known Limitations

The following issues are related to the WAI-ARIA support limitations of browsers and screen readers:

 /