Accessibility in Blazor Chat UI Component
10 Oct 20255 minutes to read
The Syncfusion Blazor Chat component follows key accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WCAG roles roles. This commitment ensures that the component is accessible to all users.
The accessibility compliance for the Chat UI 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 following ARIA attributes are used in the Blazor Chat UI component to enhance its accessibility:
| Attribute | Purpose |
|---|---|
role="button" |
Applied to toolbar items to indicate they are clickable and will trigger an action. |
role="toolbar" |
Applied to the container of toolbar action buttons. |
aria-label |
Provides a string value that gives an accessible name to interactive elements, such as toolbar buttons. |
aria-orientation |
Specifies the orientation of the toolbar (e.g., horizontal). |
aria-disabled |
Indicates whether a toolbar item is disabled and not interactive. |
aria-multiline |
Applied to the message input box to indicate whether it accepts single or multiple lines of input. |
Keyboard interaction
The Chat UI component supports the following keyboard shortcuts for improved navigation and interaction.
General Navigation
| Windows | Mac | Action |
|---|---|---|
| Enter | Enter | Selects the focused item or sends a message when the input is focused. |
| Tab | Tab | Moves focus forward through the interactive elements. |
| Shift + Tab | ⇧ + Tab | Moves focus backward through the interactive elements. |
| Page Up | Page Up | Scrolls up through the chat history. |
| Page Down | Page Down | Scrolls down through the chat history. |
| Ctrl + Home | ⌘ + Home | Scrolls to the first message in the chat history. |
| Ctrl + End | ⌘ + End | Scrolls to the most recent message in the chat history. |
Toolbar Navigation
| Windows | Mac | Action |
|---|---|---|
| ← | ← | Focuses the previous toolbar item. |
| → | → | Focuses the next toolbar item. |
| Enter / Space | Enter / Space | Activates the focused toolbar item. |
| Home | Home | Moves focus to the first toolbar item. |
| End | End | Moves focus to the last toolbar item. |
Ensuring Accessibility
The accessibility of the Blazor Chat UI component is ensured through automated testing using accessibility-checker and axe-core software tools.