Accessibility in EJ2 JavaScript TimePicker
4 Sep 20267 minutes to read
The TimePicker 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 TimePicker 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 makes web applications and its content more accessible to people with disabilities without any barriers. It especially tracks the dynamic value changes and DOM changes.
The TimePicker component has covered the WAI-ARIA specifications with the following list of WAI-ARIA
attributes: aria-haspopup, aria-selected, aria-disabled, aria-activedescendant, aria-expanded, aria-owns, and aria-autocomplete.
Here in the TimePicker, the combobox plays the role of input element, and the listbox plays the role of popup element.
-
Aria-haspopup: Provides the information about whether this element displays a pop-up window or not.
-
Aria-selected: Indicates the current selected value of the TimePicker component.
-
Aria-disabled: Indicates the disabled state of the TimePicker component.
-
Aria-expanded: Indicates the expanded state of the popup.
-
Aria-autocomplete: Indicates whether input completion suggestions are provided or not.
-
Aria-owns: Attribute that creates a parent/child relationship between two DOM elements in the accessibility layer.
-
Aria-activedescendant: Attribute that helps in managing the current active child of the TimePicker component.
-
Role: Attribute that gives assistive technology information for handling each element in a widget.
Keyboard interaction
Keyboard accessibility is one of the most important aspects of web accessibility. People with disabilities like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse.
The TimePicker component has built-in keyboard accessibility support by following the WAI-ARIA practices.
It supports the following list of shortcut keys to interact with the TimePicker control.
| 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. |
In the below sample, use the alt+t keys to focus the TimePicker component.
ej.base.enableRipple(true);
var timepicker = new ej.calendars.TimePicker({
placeholder: 'Select a time'
});
timepicker.appendTo('#element');
document.onkeyup = function (e) {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control by calling public method.
timepicker.focusIn();
}
};<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 TimePicker 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">
<!--style reference from the TimePicker 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-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">
<link href="style.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<input id="element" type="text">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Ensuring accessibility
The accessibility levels of the TimePicker component are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the TimePicker component is shown in the following sample. Open the sample in a new window to evaluate the component’s accessibility with accessibility tools.