HelpBot Assistant

How can I help you?

Accessibility in React Datetimepicker component

21 Feb 202613 minutes to read

The DateTimePicker 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 DateTimePicker component is outlined below.

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

WAI-ARIA attributes

Web accessibility standards define practices to make web content and applications more accessible to users with disabilities. WAI-ARIA attributes are particularly valuable for dynamic content and advanced user interface controls built with Ajax, HTML, JavaScript, and related technologies.

The DateTimePicker component provides built-in compliance with WAI-ARIA specifications through attributes applied to the input element: aria-expanded, aria-disabled, and aria-activedescendant. These attributes communicate the component’s state and properties to assistive technologies, enabling disabled users to interact effectively with the DateTimePicker.

For related information, refer to the Calendar component’s Accessibility section.

  • aria-expanded: Indicates whether the DateTimePicker popup is expanded or collapsed.

  • aria-disabled: Indicates the disabled state of the DateTimePicker component.

  • aria-activedescendant: Helps manage the currently active descendant within the DateTimePicker component.

Keyboard Interaction

You can use the following keys to interact with the DateTimePicker. The component implements the keyboard navigation support by following the WAI-ARIA practices.

DateTimePicker supports the below list of shortcut keys.

Input Navigation

Before opening the popup, use the below list of keys to DateTimePicker control the popup element.

Press To do this
Alt + Down Arrow Open the select popup
Alt + Down Arrow + Alt + Down Arrow Toggle between two popup

Calendar Navigation

Use the below list of keys to interact with the Calendar after the DatePicker popup has opened.

Press To do this
Up Arrow Focus the previous week date.
Down Arrow Focus the next week date.
Left Arrow Focus the previous date.
Right Arrow Focus the next date.
Home Focus the first date in the month.
End Focus the last date in the month.
Page Up Focus the same date in the previous month.
Page Down Focus the same date in the next month.
Enter Select the currently focused date.
Shift + Page Up Focus the same date in the previous year.
Shift + Page Down Focus the same date in the previous year.
Control + Upper Arrow Moves into the inner level of view like month-year, year-decade
Control + Down Arrow Moves out from the depth level view like decade-year, year-month
Control + Home Focus the starting date in the current year.
Control + End Focus the ending date in the current year.

Use the below list of shortcut keys to interact with the TimePicker after the TimePicker Popup has opened.

Press To do this
Upper Arrow Navigate and select the previous item.
Down Arrow Navigate and select the next item.
Left Arrow Move the cursor towards arrow key pressed direction.
Right Arrow Move the cursor towards arrow key pressed direction.
Home Navigate and select the first item.
End Navigate and select the last item.
Enter Select the currently focused item and close the popup.
Alt + Upper Arrow Close the popup.
Alt + Down Arrow Open the popup.
Esc Close the popup.

To focus the DateTimePicker component use the alt+t keys.

[Class-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    datetimepickerInstance;
    componentDidMount() {
        const proxy = this;
        document.onkeyup = (e) => {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the control.
                proxy.datetimepickerInstance.focusIn();
            }
        };
    }
    render() {
        return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" ref={(scope) => { this.datetimepickerInstance = scope; }}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePicker, DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    private datetimepickerInstance: DateTimePicker;
    public componentDidMount() {
        const proxy = this;
        document.onkeyup = (e) => {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the control.
                 proxy.datetimepickerInstance.focusIn();
            }
        };
     }

    public render() {
        return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" ref={(scope) => { (this.datetimepickerInstance as DateTimePicker | null) = scope; }}/>
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    let datetimepickerInstance;
    React.useEffect(() => {
        const proxy = this;
        document.onkeyup = (e) => {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the control.
                proxy.datetimepickerInstance.focusIn();
            }
        };
    }, []);
    return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" ref={(scope) => { datetimepickerInstance = scope; }}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePicker, DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    let datetimepickerInstance: DateTimePicker;
    React.useEffect(() => {
    const proxy = this;
        document.onkeyup = (e) => {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the control.
                 proxy.datetimepickerInstance.focusIn();
            }
        };

    }, []);
  
    return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" ref={(scope) => { (datetimepickerInstance as DateTimePicker | null) = scope; }}/>
};
ReactDOM.render(<App />, document.getElementById('element'));

Ensuring accessibility

The DateTimePicker component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

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

See also