Contents
Accessibility
Widgets includes support for accessibility, following W3C specs for Web Content Accessibility Guidelines (WCAG) 2.1, Level AA. We followed WCAG specification, as this is an international standard adopted and recognized by our customers worldwide.
What is WCAG?
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities. Following these guidelines will also often make Web content more usable to users in general. WCAG relies on 4 guiding principles for building accessible UIs:
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Operable: User interface components and navigation must be operable.
- Understandable: Information and the operation of user interface must be understandable.
- Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
Support
To ensure Widgets are accessible, WCAG 2.1 Level AA guidelines are supported. How ever, not all the Widgets meet these guidelines. The table below clearly lists the Widgets that addresses and meets the standard accessibility requirements to help assist users with vision, hearing or mobility impairments in gaining greater access to the customer support.
| Plugins | WCAG 2.1 Support |
|---|---|
| WebChat | Level AA |
| SendMessage | Level AA |
| Callback | Level AA |
| Calendar | Level AA |
| CallUs | Level AA |
| ChannelSelector | Level AA |
| ClickToCall | Level AA |
| Engage | Level AA |
| Search | Level AA |
| SideBar | Level AA |
| CoBrowse | Not Available |
| ChatDeflection | Not Available |
Widgets supports all the WCAG 2.1 Level AA accessibility guidelines for both Mobile and Desktop. Some of the high level features include:
Screen reader support
Widgets are accessible via screen readers. They announce all the textual and non-textual content on the Widgets window elements, announce new chat messages sent by the Agent to the visitor and as well as the outgoing messages sent by the visitor to the Agent, reading error messages, live Estimated Wait Times automatically, etc. In order to achieve a consistent reading behavior of live data across all the screen readers and the browsers, recommended ARIA live regions have been implemented in the following:
- WebChat for reading new messages
- Callback, ClickToCall and ChannelSelector to read live Estimated Wait Time.
Widgets has been tested and verified in the following desktop environments:
Windows 10: JAWS Professional Edition Version 2020.1912.11 with Chrome and Internet Explorer 10.
Mac OS: Voice Over in macOS Sierra with Chrome and Safari.
Keyboard Accessibility
Widgets are accessible via the keyboard. Users may navigate to and within any widget using the tab key or shift+tab key combo. For dropdowns and the date picker, the user can highlight a selection using the arrow keys. The enter or space key can then be used to make a selection, send a message, or activate a button.
- tab - step forward to next element
- shift+tab - step backwards to previous element
- arrow keys - move between options within a dropdown or date picker
- enter - make a selection or submit
- space - make a selection or activate a button
Color Contrast
Text and background colors should contrast to a minimum of 4.5:1 for standard text. This allows text to be read clearly. Changes were made to the default Widgets themes to increase color contrast in our Dark and Light themes. Changes included border, button, link, text, and background color adjustments to meet the contrast requirements while maintaining the same look and feel. In addition, we've added an outline to indicate which element or section of each widget is in focus.
Browser Zoom and Text Resizing
Genesys Widgets supports zooming in and our, or resizing text using the browser's built-in controls. This makes it easier for some viewers to read text on the screen.
Customization
localization
Aria labels are used throughout Genesys Widgets to supply callouts and context for screenreaders. These labels have been added to the standard localization language pack definition, allowing you to customize these labels yourself. All aria label strings are prefixed with "aria" to make them easy to identify. Review each widget's localization reference page to find these new aria labels. Example: WebChat Widget Localization Reference
Configuration Options
| Widget | Option Name | Description |
|---|---|---|
| WebChat | ariaIdleAlertIntervals | An array containing the intervals as a percentage at which the screen reader will announce the remaining idle time. By default, it is enabled with the following time intervals, and it is customizable according to the user's needs. Configuring a value of 'false' will let the screen reader call out idle time for every change. |
| WebChat | ariaCharRemainingIntervals | An array containing the intervals as a percentage at which the screen reader will announce the remaining characters when the user inputs text into the message area. By default, it is enabled with the following intervals, and it is customizable according to the user needs. Configuring a value of 'false' will let the screen reader call out remaining characters for every change. |
| WebChat | emojiList | emojiList must be configured with display names to support screen reader call out the emoji name. These emoji names are applied as aria-label attributes on the non text emoji markup. |
| ClickToCall | ariaNumberExpirationIntervals | An array containing the intervals in a percentage at which the screen reader will announce the remaining expiry time for the phone number. By default, it is enabled with the following time intervals, and is customizable according to user needs. Configuring a value of 'false' will let the screen reader read the phone number expiry time for every change. |
Resources and Tools Used
Online
Screen Readers
- JAWS
- NVDA
- VoiceOver