Creating Accessible Engagements
Live Assist visitor experience meets disability accessibility requirements and follows stringent industry standards, including ADA and WCAG 2.0 AA compliance. This applies to the Engagement Window, engagements and surveys for both the desktop and mobile web (iOS and Android).
Since engagements are fully configurable by the customer, this article describes the steps for creating accessible engagements.
The following features are supported out-of-the-box for all the engagements:
Engagements are fully keyboard operable. You can navigate to the engagement using the tab key and “click it” using Enter or Space.
Engagements are announced by and can be operated using screen readers.
Note: All engagement types are accessible on desktop.
To create an accessible engagement in Live Assist:
Prerequisite: Create your engagement as you want it to appear on your website. Include any text, images and buttons using the Engagement studio. Use simple and clear language for users with cognitive disabilities.
Ensure text and background color ratio (for vision impaired visitors): Text and background color contrast ratio should be at least 4.5:1, unless the font is at least 18 point or 14 point bold, in which case contrast ratio should be at least 3:1. You can use various tools available on the web to verify the contrast ratio.
Add alternate text to each image in your engagement window graphic:
Click an image in the engagement window graphic. A settings window for the image opens.
Under Accessibility, in the Alt text box, enter alternate text for the graphic element you selected, as follows:
If the element image conveys information, the alternate text should convey the same information.
If the image is for decoration only, the alternate text should be ““ (two double quotes one after another, with no space between them).
This text will be announced by screen readers for visually impaired visitors. Note that if “” is used, it will not be announced.
To ensure that the elements in the engagement are announced in the order you require, define the Announcement order of each element in your engagement window graphic. Click each element (text, image, button) and fill in the number corresponding to the order in which it should be announced. Use whole numbers. The first element that should be announced should contain 1, the second 2, etc.
Note: If you don’t define the Announcement order, elements will be announced in the order they were added to the engagement.
To enable navigation by heading using screen readers, define headings and heading levels in the engagement graphic . For example, in the graphic below, “Can’t find what you are looking for?” is a heading, while the remaining text is not. Click the text element and select the heading level from the Heading dropdown. The heading level should suit the hierarchy of headings on your page.
Save the engagement.