Accessibility in React Chat UI Component
28 Aug 20255 minutes to read
The Chat UI 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 Chat UI component is outlined below.
| Icon | Description |
|---|---|
 |
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 following ARIA attributes are used in the Chat UI component to provide semantic meaning and improve accessibility for screen reader users.
| Attribute | Purpose |
|---|---|
role=button |
Indicates that an element, such as a toolbar icon, is clickable and triggers an action. |
role=toolbar |
Specifies that a container element holds a set of interactive controls, defining it as a toolbar. |
aria-label |
Provides an accessible name for interactive elements, such as toolbar buttons, when a visible label is not present. |
aria-orientation |
Specifies the orientation of the toolbar (horizontal or vertical) to assistive technologies. |
aria-disabled |
Indicates that a toolbar or element is currently non-interactive, preventing user interaction. |
aria-multiline |
Communicates to assistive technologies whether the chat input textbox accepts single or multiple lines of text. |
Keyboard Interaction
The following keyboard shortcuts are supported by the Chat UI component.
| Press | To do this |
|---|---|
| Enter | Selects the focused item or sends a message when the input is focused. |
| Tab | Moves focus forward through the interactive elements. |
| Shift + Tab | Moves focus backward through the interactive elements. |
| Page Up | Scrolls up through the chat history. |
| Page Down | Scrolls down through the chat history. |
| Ctrl + Home | Scrolls to the first message in the chat view. |
| Ctrl + End | Scrolls to the most recent message in the chat view. |
Chat UI Toolbars
| Press | To do this |
|---|---|
| Left Arrow | Focuses the previous toolbar element. |
| Right Arrow | Focuses the next toolbar element. |
| Enter or Space | Activates the focused toolbar button. |
| Home | Moves focus to the first element in the toolbar. |
| End | Moves focus to the last element in the toolbar. |
Ensuring Accessibility
The Chat UI component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The Chat UI component’s accessibility levels are ensured by running it through automated testing using the accessibility-checker and axe-core software tools. This process helps us identify and address potential accessibility issues, ensuring that the component provides an inclusive experience for all users.