Accessibility in React Toolbar
4 Sep 20265 minutes to read
The React Toolbar component has been designed keeping in mind the WAI-ARIA specifications, and applying the WAI-ARIA roles, states, and properties along with keyboard support for people who use assistive devices. WAI-ARIA accessibility support is achieved through attributes like aria-label, and aria-orientation. It provides information about elements in a document for assistive technology. The component implements keyboard navigation support by following the WAI-ARIA practices, and has been tested in major screen readers.
The accessibility compliance for the React Toolbar component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- 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.ARIA attributes
React Toolbar component is designed in accordance with the WAI-ARIA standard. React Toolbar is supported with ARIA Accessibility which is accessible to screen readers, and other assistive technology devices. The following list of attributes are added in the React Toolbar.
In addition to the ARIA attributes listed below that are automatically applied, the React Toolbar provides a enableRtl prop to enable Right-To-Left (RTL) rendering for the accessibility of right-to-left languages.
| Property | Functionalities |
|---|---|
| role=”toolbar” | Attribute is set to the React Toolbar element to describe the actual role of the element. |
| aria-orientation | Attribute is set to the React Toolbar element to indicate the React Toolbar orientation. Default value is horizontal. |
| aria-label | Attribute is set to React Toolbar element to describe the purpose of the set of React toolbar. |
| aria-expanded | Attribute is set to the React Toolbar Popup element to indicate the expanded state of the popup. |
| aria-haspopup | Attribute is set to the popup element to indicate the popup mode of the React Toolbar. When popup mode is enabled, the attribute value is set to true or a valid ARIA token (e.g., menu). |
| aria-disabled | Attribute set to the React Toolbar element to indicate the disabled state of the React Toolbar. |
Keyboard interaction
Keyboard navigation is enabled by default. Possible keys are:
| Key | Description |
|---|---|
| Left | Focuses the previous element. |
| Right | Focuses the next element. |
| Enter | When focused on a React Toolbar command, pressing the key triggers the click of React Toolbar element. When popup drop-down icon is focused, the popup opens. |
| Esc (Escape) | Closes popup. |
| Down | Focuses the next popup element. In vertical orientation, focuses the next React Toolbar item. |
| Up | Focuses the previous popup element. In vertical orientation, focuses the previous React Toolbar item. |
| Home | Moves focus to the first React Toolbar item. |
| End | Moves focus to the last React Toolbar item. |
| Tab | Moves focus forward through the interactive elements. |
| Shift + Tab | Moves focus backward through the interactive elements. |
Accessibility validation
The React Toolbar component’s accessibility levels are validated through automated testing with the accessibility-checker and axe-core tools.
The accessibility compliance of the React Toolbar component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the React Toolbar component with accessibility tools.