Accessibility in React AI AssistView component
28 Aug 20254 minutes to read
The AI AssistView 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 AI AssistView 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 AI AssistView component uses the following WAI-ARIA attributes to support assistive technologies:
| Attributes | Purpose |
|---|---|
role=button |
Indicates that the element is clickable and triggers an action when activated by the user. |
role=toolbar |
Specifies that the element is a toolbar. |
aria-label |
Defines a string value that labels an interactive element for accessibility. |
aria-orientation |
Specifies the orientation of the toolbar. |
aria-disabled |
Indicates whether the toolbar or element is currently disabled and not interactive. |
aria-multiline |
Indicates that a textbox accepts multiple lines of input or only a single line. |
Keyboard interaction
You can use the following keyboard shortcuts to interact with the AI AssistView component.
| Press | To do this |
|---|---|
| Enter | Selects the focused item. |
| Tab | Moves focus forward through the interactive elements. |
| Shift + Tab | Moves focus backward through the interactive elements. |
| AI AssistView Toolbars | |
| Left Arrow | Within the toolbar, focuses the previous item. |
| Right Arrow | Within the toolbar, focuses the next item. |
| Space or Enter | Within the toolbar, activates the focused item. |
| Home | Within the toolbar, moves focus to the first item. |
| End | Within the toolbar, moves focus to the last item. |
Ensuring accessibility
The accessibility of the AI AssistView component is continuously verified using accessibility-checker and axe-core software tools during automated testing.