Accessibility in EJ2 TypeScript DateTime Picker
4 Sep 202610 minutes to read
The DateTime Picker component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WAI-ARIA roles that are commonly used to evaluate accessibility.
The accessibility compliance for the DateTime Picker 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 a way to make web content and web applications more accessible to people with disabilities. It especially helps in dynamic content changes and advanced user interface controls developed with AJAX, HTML, JavaScript, and related technologies.
The DateTime Picker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA support is achieved through the attributes like aria-expanded, aria-disabled, and aria-activedescendant applied to the input element.
To know about the accessibility of Calendar, refer to the Calendar’s Accessibility section.
These attributes help provide information about the widget for assistive technology to people with disabilities in screen reader.
-
Aria-expanded: This attribute indicates the state of a collapsible element.
-
Aria-disabled: This attribute indicates the disabled state of the DateTime Picker component.
-
Aria-activedescendant: This attribute helps in managing the current active child of the DateTime Picker component.
Keyboard interaction
The following keys can be used to interact with the DateTime Picker. The component implements the keyboard navigation support by following the WAI-ARIA practices.
The DateTime Picker supports the following list of shortcut keys.
Input Navigation
Before opening the popup, the following list of keys can be used to control the popup element of the DateTime Picker.
| Press | To do this |
|---|---|
| Alt + Down Arrow | Opens the select popup |
| Alt + Down Arrow + Alt + Down Arrow | Toggles between two popups |
Calendar Navigation
The following list of keys can be used to interact with the Calendar after the DateTime Picker popup has opened.
| Press | To do this |
|---|---|
| Up Arrow | Focuses the previous week date. |
| Down Arrow | Focuses the next week date. |
| Left Arrow | Focuses the previous date. |
| Right Arrow | Focuses the next date. |
| Home | Focuses the first date in the month. |
| End | Focuses the last date in the month. |
| Page Up | Focuses the same date in the previous month. |
| Page Down | Focuses the same date in the next month. |
| Enter | Selects the currently focused date. |
| Shift + Page Up | Focuses the same date in the previous year. |
| Shift + Page Down | Focuses the same date in the next year. |
| Control + Up 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 | Focuses the starting date in the current year. |
| Control + End | Focuses the ending date in the current year. |
The following list of shortcut keys can be used to interact with the TimePicker after the TimePicker popup has opened.
| Press | To do this |
|---|---|
| Up Arrow | Navigates and selects the previous item. |
| Down Arrow | Navigates and selects the next item. |
| Left Arrow | Moves the cursor towards the arrow key pressed direction. |
| Right Arrow | Moves the cursor towards the arrow key pressed direction. |
| Home | Navigates and selects the first item. |
| End | Navigates and selects the last item. |
| Enter | Selects the currently focused item and closes the popup. |
| Alt + Up Arrow | Closes the popup. |
| Alt + Down Arrow | Opens the popup. |
| Esc | Closes the popup. |
To focus the DateTime Picker component, use the
alt+tkeys.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
// creates a DateTimePicker component
let datetimepickerObject: DateTimePicker = new DateTimePicker({
// sets the placeholder
placeholder: 'Select a date and time'
});
datetimepickerObject.appendTo('#element');
document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the component.
datetimepickerObject.element.focus();
}
};<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 DateTimePicker control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<!--style reference from the DateTimePicker component-->
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id='element' type="text" />
</div>
</body>
</html>Ensuring accessibility
The accessibility levels of the DateTime Picker component are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the DateTime Picker component is shown in the following sample. Open the sample in a new window to evaluate the component’s accessibility with accessibility tools.