Accessibility Support
Out of the box, the Telerik and Kendo UI Chat provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The Chat is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component
role, provides options for managing its focus and is tested against the most popular screen readers.
WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
Chat component
The Chat component is a composite one and integrates the accessibility of the ToolBar, Dialog, DropDownButton and ContextMenu components.
Selector | Attribute | Usage |
---|---|---|
.k-message-list | role=log | The role of the Chat message list must imply that there is a log (list) of messages. |
aria-label | Announces the purpose of the Chat message list (for ex. 'Message list'). | |
aria-live=polite | Announces new messages in the Chat message list. | |
.k-bubble | tabindex=0 | The Chat bubble must be focusable. |
.k-bubble .k-typing-indicator | tabindex=-1 | The Chat bubble typing indicator should not be focusable. |
.k-suggestion-group | role=group | Indicates that the suggestion container element is a group. |
.k-suggestion | role=button | The suggestion elements must be exposed as buttons. |
tabindex=0 | The suggestion elements must be part of the page tabsequence. | |
.k-input-suffix>.k-button | role=button or nodeName=button | The buttons must have appropriate role. |
aria-label or title | The buttons must be properly labelled. | |
.k-input-suffix>.k-chat-send.k-disabled | aria-disabled=true | Announces send action as disabled if necessary. |
.k-message-group-content>.k-chat-download-button | aria-label or title | The download button must be properly labelled. |
role=button or nodeName=button | The download button must have an appropriate role. | |
.k-message-reference>.k-button | aria-label or title | The reference close button must be properly labelled. |
role=button or nodeName=button | The reference close button must have an appropriate role. | |
.k-bubble-expandable-indicator | role=button | The expandable indicator must have an appropriate role. |
aria-label or title | The expandable indicator must be properly labelled. | |
tabindex=0 | The expandable indicator must be part of the page tabsequence. |
ToolBar Component
Chat Message ToolBar follows the specification for the the ToolBar component.
Textarea Component
DropDownButton Component
SpeechToTextButton Component
ContextMenu Component
Managing the Focus
Focusable elements in the Chat are part of the page tabsequence. Those are:
.k-suggestion
(if any);.k-message-box textarea
;- all
.k-input-suffix button
elements; - all
.k-chat-file .k-menu-button
elements (if any); - all
.k-chat-download-button
elements (if any); - all
.k-message-reference .k-button
elements (if any);
Keyboard Shortcuts
This section lists the keyboard shortcuts supported by the Chat composite component.
Toolbar Component
DropDownButton Component
SpeechToTextButton Component
ContextMenu Component
The ContextMenu component provides a context menu for the chat bubble upon Right Click
/ Shift + F10 key press
.
Keyboard Shortcuts applicable to the k-bubble
element
Shortcut | Behavior |
---|---|
Up Arrow | Selects and focuses the previous Chat bubble |
Down Arrow | Selects and focuses the next Chat bubble |
Home | Selects and focuses the first Chat bubble |
End | Selects and focuses the last Chat bubble |
Keyboard Shortcuts applicable to the k-suggestion
, k-bubble-expandable-indicator
, and k-input-suffix button
elements
Shortcut | Behavior |
---|---|
Enter/Space | Triggers a click action on the element. |
Keyboard Shortcuts applicable to the k-input-inner
element
Shortcut | Behavior |
---|---|
Enter | Sends the message. |
Shift + Enter | Start a new line in the textarea message box. |
Testing
The Chat has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The Chat has been tested with the following screen readers and browsers combinations:
Environment | Tool |
---|---|
Firefox | NVDA |
Chrome | JAWS |
Microsoft Edge | JAWS |