Chat

The Chat component allows end users to communicate and exchange multimedia with other users or chatbots.

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.

SelectorAttributeUsage
.k-message-listrole=logThe role of the Chat message list must imply that there is a log (list) of messages.
aria-labelAnnounces the purpose of the Chat message list (for ex. 'Message list').
aria-live=politeAnnounces new messages in the Chat message list.
.k-bubbletabindex=0The Chat bubble must be focusable.
.k-bubble .k-typing-indicatortabindex=-1The Chat bubble typing indicator should not be focusable.
.k-suggestion-grouprole=groupIndicates that the suggestion container element is a group.
.k-suggestionrole=buttonThe suggestion elements must be exposed as buttons.
tabindex=0The suggestion elements must be part of the page tabsequence.
.k-input-suffix>.k-buttonrole=button or nodeName=buttonThe buttons must have appropriate role.
aria-label or titleThe buttons must be properly labelled.
.k-input-suffix>.k-chat-send.k-disabledaria-disabled=trueAnnounces send action as disabled if necessary.
.k-message-group-content>.k-chat-download-buttonaria-label or titleThe download button must be properly labelled.
role=button or nodeName=buttonThe download button must have an appropriate role.
.k-message-reference>.k-buttonaria-label or titleThe reference close button must be properly labelled.
role=button or nodeName=buttonThe reference close button must have an appropriate role.
.k-bubble-expandable-indicatorrole=buttonThe expandable indicator must have an appropriate role.
aria-label or titleThe expandable indicator must be properly labelled.
tabindex=0The 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

ShortcutBehavior
Up ArrowSelects and focuses the previous Chat bubble
Down ArrowSelects and focuses the next Chat bubble
HomeSelects and focuses the first Chat bubble
EndSelects and focuses the last Chat bubble

Keyboard Shortcuts applicable to the k-suggestion, k-bubble-expandable-indicator, and k-input-suffix button elements

ShortcutBehavior
Enter/SpaceTriggers a click action on the element.

Keyboard Shortcuts applicable to the k-input-inner element

ShortcutBehavior
EnterSends the message.
Shift + EnterStart 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:

EnvironmentTool
FirefoxNVDA
ChromeJAWS
Microsoft EdgeJAWS

Resources

Feedback