The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. It especially it tracks the dynamic value changes and DOM changes.
The TimePicker control 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 TimePicker, the combobox
plays the role of input element, and the listbox
plays the role of popup element.
Keyboard accessibility is one of the most important aspects of web accessibility. Disabled people like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse.
The TimePicker control 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 |
---|---|
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. |
In the below sample use the alt+t
keys to focus the TimePicker control.
<script>
document.onkeyup = function (e) {
var timepicker = document.getElementById('timepicker').ej2_instances[0];
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control by calling public method.
timepicker.focusIn(e);
}
};
</script>
<ejs-timepicker id="timepicker" placeHolder="Select a time"></ejs-timepicker>