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 and will also often make Web content more usable to users in general. WCAG relies on four 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 is accessible, WCAG 2.1 Level AA guidelines are supported. However, not all Widgets meet these guidelines. The table below clearly lists the Widgets that address and meet 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

Supported 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 user as well as the outgoing messages sent by the user to the Agent. They read error messages and 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.

Important

Not all screen readers may read all the textual and non-textual window functionality. There are known issues around Firefox and Internet Explorer with some screen readers. The content is read as long as the screen reader model is supported on that particular browser.

Keyboard Accessibility

Supported 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 backward 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 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.

Important

The Sidebar Widget can only support the zoom feature properly if it contains 6 or fewer rows.

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

Contents