Accessibility in React Timepicker component
23 Jan 202411 minutes to read
The TimePicker 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 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
The web accessibility makes web applications and its content more accessible to people with disabled without any barriers. Especially it tracks the dynamic value changes and DOM changes.
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, the combobox as a role for input element and listbox as a role for popup element in the TimePicker.
-
Aria-haspopup : Provides the information about whether this element display a pop-up window or not.
-
Aria-selected : Indicates the current selected value of the TimePicker component.
-
Aria-disabled : Indicates disabled state of the TimePicker component.
-
Aria-expanded : Indicates expanded state of the popup.
-
Aria-autocomplete : Indicates whether user input completion suggestions are provided or not.
-
Aria-owns : Attribute that creates a parent/child relationship between the two DOM element in accessibility layer
-
Aria-activedescendent : Attribute that helps in managing the current active child of the TimePicker component.
-
Role : Attributes that gives assistive technologies information for handling each element in a widget.
Keyboard Interaction
Keyboard accessibility is one of the most important aspects of web accessibility. It will be more useful to all the computer users, as they often allow to interact keyboard more than a mouse.
Among people with disabilities like blind or who have motor disabilities are also can make frequent use of keyboard shortcuts.
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 component.
| 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. |
The following sample use the alt+t keys to focus the TimePicker component.
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
timepickerInstance;
componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.timepickerInstance.focus();
}
};
}
render() {
return <TimePickerComponent id="timepicker" placeholder="Select a Time" ref={(scope) => { this.timepickerInstance = scope; }}/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('timer'));// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePicker, TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component<{}, {}> {
private timepickerInstance: TimePicker;
public componentDidMount() {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.timepickerInstance.focus();
}
};
}
public render() {
return <TimePickerComponent id="timepicker" placeholder="Select a Time" ref={(scope) => { (this.timepickerInstance as TimePicker | null) = scope; }}/>
}
};
ReactDOM.render(<App />, document.getElementById('timer'));// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
function App() {
let timepickerInstance;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.timepickerInstance.focus();
}
};
}, []);
return <TimePickerComponent id="timepicker" placeholder="Select a Time" ref={(scope) => { timepickerInstance = scope; }}/>;
}
;
ReactDOM.render(<App />, document.getElementById('timer'));// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePicker, TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
function App() {
let timepickerInstance: TimePicker;
React.useEffect(() => {
const proxy = this;
document.onkeyup = (e) => {
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control.
proxy.timepickerInstance.focus();
}
};
}, []);
return <TimePickerComponent id="timepicker" placeholder="Select a Time" ref={(scope) => { (timepickerInstance as TimePicker | null) = scope; }}/>
};
ReactDOM.render(<App />, document.getElementById('timer'));Ensuring accessibility
The TimePicker component’s accessibility levels 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 accessibility of the TimePicker component with accessibility tools.