How can I help you?
Accessibility in React Calendar component
21 Feb 202612 minutes to read
The Calendar component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and related WAI-ARIA roles used to evaluate accessibility.
The accessibility compliance for the Calendar 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 defines how to make web content and applications more accessible to people with disabilities. It especially addresses dynamic content changes and advanced UI controls developed with Ajax, HTML, JavaScript, and related technologies.
The Calendar provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA support is provided through attributes such as aria-label, aria-selected, aria-disabled, and aria-activedescendant applied to navigation buttons and day cells.
This provides assistive technologies with information about the widget for screen reader users. The Calendar component uses the grid role with each day represented as a gridcell.
-
Aria-label : attribute provides the text label for an object for the previous and next month element. It helps the screen reader object to read for the assistive purpose.
-
Aria-selected : attribute indicates the currently selected date of the Calendar component.
-
Aria-disabled : attribute indicates the disabled state of this Calendar component.
-
Aria-activedescendant : attribute helps in managing the current active child of the Calendar component.
-
Role : attributes gives assistive technologies information about how to handle each element in a widget.
-
Grid-cell : attributes define the individual cell that can be focusable and selectable.
Keyboard Interaction
You can use the following keys to interact with the Calendar. The component implements the keyboard navigation support by following the WAI-ARIA practices
It supports the below list of shortcut keys.
| Press | To do this |
|---|---|
| Upper 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 Calendar component use the
alt+tkeys.
[Class-component]
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
calendarInstance;
componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press altt to focus the control.
proxy.calendarInstance.element.querySelector('table').focus();
}
};
}
render() {
return (
// specifies the tag for render the Calendar component
<CalendarComponent id="calendar" ref={(scope) => { this.calendarInstance = scope; }}/>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));import { Calendar, CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
private calendarInstance: Calendar;
public componentDidMount() {
const proxy = this;
document.onkeyup = (e: KeyboardEvent) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press altt to focus the control.
(proxy.calendarInstance.element.querySelector('table') as HTMLElement).focus();
}
};
}
public render() {
return (
// specifies the tag for render the Calendar component
<CalendarComponent id="calendar" ref={(scope) => { (this.calendarInstance as Calendar | null) = scope; }} />
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
let calendarInstance;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press altt to focus the control.
proxy.calendarInstance.element.querySelector('table').focus();
}
};
}, []);
return (
// specifies the tag for render the Calendar component
<CalendarComponent id="calendar" ref={(scope) => { calendarInstance = scope; }}/>);
}
ReactDOM.render(<App />, document.getElementById('element'));import { Calendar, CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
let calendarInstance: Calendar;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press altt to focus the control.
proxy.calendarInstance.element.querySelector('table').focus();
}
};
}, []);
return (
// specifies the tag for render the Calendar component
<CalendarComponent id="calendar" ref={(scope) => { (calendarInstance as Calendar | null) = scope; }} />
);
}
ReactDOM.render(<App />, document.getElementById('element'));Ensuring accessibility
The Calendar component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Calendar component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Calendar component with accessibility tools.