Accessibility in React AutoComplete
4 Sep 202611 minutes to read
The React AutoComplete component has been designed with WAI-ARIA specifications in mind and applies the WAI-ARIA roles, states, and properties along with keyboard support. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
The React AutoComplete component follows 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 React AutoComplete 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.WCAG 2.2 and Section 508 compliance are marked as Intermediate because a subset of advanced scenarios (such as custom template rendering and remote-data loading) may require additional ARIA wiring from the application side. For the specific criteria that are not fully met, see the accessibility standards section.
WAI-ARIA attributes
The React AutoComplete component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the React AutoComplete component:
| Property | Functionalities |
|---|---|
| aria-haspopup | Indicates whether the React AutoComplete input element has a suggestion list or not. |
| aria-expanded | Indicates whether the suggestion list has expanded or not. |
| aria-controls | This attribute contains the ID of the suggestion list to link the input element with the popup list as a child element. |
| aria-selected | Indicates the selected option from the list. |
| aria-readonly | Indicates the readonly state of the React AutoComplete element. |
| aria-disabled | Indicates whether the React AutoComplete component is in a disabled state or not. |
| aria-activedescendant | This attribute holds the ID of the active list item to focus its descendant child element. |
| aria-owns | This attribute contains the ID of the suggestion list to indicate popup as a child element. |
| aria-React AutoComplete | This attribute value depends on the suggest and autofill props. When both are enabled, the value is both (a list of options shows and the currently selected suggestion also shows inline). When only autofill is enabled, the value is inline. When neither is enabled, the value is none. |
| aria-busy | Indicates that the React AutoComplete component is currently fetching data from a remote source when its value is true. |
Keyboard interaction
You can use the following key shortcuts to interact with the React AutoComplete component using the keyboard.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Down | In popup hidden state, opens the suggestion list. In popup open state, moves focus to the first item when no item is selected, or moves focus to the item next to the currently selected item. |
| Arrow Up | In popup hidden state, opens the suggestion list. In popup open state, moves focus to the last item when no item is selected, or moves focus to the previous item. |
| Page Down | Scrolls down to the next page and moves focus to the first item when the popup list opens. |
| Page Up | Scrolls up to the previous page and moves focus to the last item of the previous page when the popup list opens. |
| Enter | Selects the focused item and sets it to the React AutoComplete component. |
| Tab | Focuses on the next focusable element in the tab order when the popup is closed. Otherwise, closes the popup list and retains focus in the component if it is in an open state. |
| Shift + Tab | Focuses on the previous focusable element in the tab order when the popup is closed. Otherwise, closes the popup list and retains focus in the component if it is in an open state. |
| Alt + Down | Opens the popup list. |
| Alt + Up | In popup hidden state, opens the popup list. In popup open state, closes the popup list. |
| Home | Cursor moves to before the first character in input. |
| End | Cursor moves to after the last character in input. |
| Esc | Closes the popup list when it is in an open state and removes the selection. |
| Character | On typing characters in the input, filters the suggestion list based on the typed text and opens the popup list. |
| Backspace | Deletes the previous character in the input and re-filters the suggestion list accordingly. |
In the below sample, focus the React AutoComplete component using Alt + T keys.
[Class Component]
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the array of string
sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
render() {
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the array of string
private sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
public render() {
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional Component]
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of string
const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the array of string
const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
return (
// specifies the tag for render the AutoComplete component
<AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game" />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Ensuring accessibility
The React AutoComplete component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the React AutoComplete component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the React AutoComplete component with accessibility tools.