How can I help you?
Accessibility in React Datepicker component
21 Feb 202613 minutes to read
The DatePicker 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 DatePicker component is outlined below.
- 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.WAI-ARIA attributes
Web accessibility standards define practices to make web content and applications 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 DatePicker component provides built-in compliance with WAI-ARIA specifications through the following 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 DatePicker.
For related information, refer to the Calendar component’s Accessibility section.
-
aria-expanded: Indicates the state of a collapsible element (expanded or collapsed).
-
aria-disabled: Indicates the disabled state of the DatePicker component.
-
aria-activedescendant: Helps manage the currently active descendant within the DatePicker component.
Keyboard Interaction
You can use the following keys to interact with the DatePicker. The component implements the keyboard navigation support by following the WAI-ARIA practices.
It supports the below list of shortcut keys.
Input Navigation
Before opening the popup, use the below list of keys to control the popup element.
| Press | To do this |
|---|---|
| Alt + Down Arrow | Opens the popup. |
| Alt + Up Arrow | Closes the popup. |
| Esc | closes the popup. |
Calendar Navigation
Use the below list of keys to navigate the Calendar after the 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 next 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. |
To focus the DatePicker component use the
alt+tkeys.
[Class-component]
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
datepickerInstance;
componentDidMount() {
const proxy = this;
this.datepickerInstance.placeholder = 'Enter Date';
this.datepickerInstance.dataBind();
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.datepickerInstance.focusIn();
}
};
}
render() {
return (
// specifies the tag for render the DatePicker component
<DatePickerComponent id="datepicker" ref={(scope) => { this.datepickerInstance = scope; }}/>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));import { DatePicker, DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
private datepickerInstance: DatePicker;
public componentDidMount() {
const proxy: any = this;
this.datepickerInstance.placeholder = 'Enter Date';
this.datepickerInstance.dataBind();
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.datepickerInstance.focusIn();
}
};
}
public render() {
return (
// specifies the tag for render the DatePicker component
<DatePickerComponent id="datepicker" ref={(scope) => { (this.datepickerInstance as DatePicker | null) = scope; }} />
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
let datepickerInstance;
React.useEffect(() => {
const proxy = this;
this.datepickerInstance.placeholder = 'Enter Date';
this.datepickerInstance.dataBind();
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.datepickerInstance.focusIn();
}
};
}, []);
return (
// specifies the tag for render the DatePicker component
<DatePickerComponent id="datepicker" ref={(scope) => { datepickerInstance = scope; }}/>);
}
;
ReactDOM.render(<App />, document.getElementById('element'));import { DatePicker, DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
let datepickerInstance: DatePicker;
React.useEffect(() => {
datepickerInstance.placeholder = 'Enter Date';
datepickerInstance.dataBind();
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
datepickerInstance.focusIn();
}
};
}, []);
return (
// specifies the tag for render the DatePicker component
<DatePickerComponent id="datepicker" ref={(scope) => { (datepickerInstance as DatePicker | null) = scope; }} />
);
};
ReactDOM.render(<App />, document.getElementById('element'));Ensuring accessibility
The DatePicker component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DatePicker component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the DatePicker component with accessibility tools.