Contents
Accessibility
Widgets added 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, we comply with WCAG 2.1 Level AA guidelines. 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 Compliant |
|---|---|
| WebChat | ✓ |
| SendMessage | ✓ |
| Callback | ✓ |
| Calendar | ✓ |
| CallUs | ✓ |
| ChannelSelector | ✓ |
| ClickToCall | ✓ |
| Engage | ✓ |
| Search | ✓ |
| SideBar | ✓ |
| CoBrowse | ✗ |
| ChatDeflection | ✗ |
Widgets meet all the WCAG 2.1 Level AA accessibility requirements 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 selector or activate a button
Color Contrast
Text and background colors should contrast to a minimum of 4:1 for standard text. This allows text to be read clearly. Changes were made to the default Widgets themes to increase color contrast where necessary.
WCAG 2.1 AA 1.4.3 Minimum Contrast
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
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. |
| 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