Want to build your own 24/7 FAQ knowledge base?
LibraryH3lp subscriptions
include unlimited independent internal or public-facing
knowledge bases.
10047 views | Last updated on Sep 29, 2021 508 accessibility ADA chat widget
The guest-facing chat box has been designed for accessibility to users assistive technology since its first release way back in 2007. Since then, the chat box has received regular updates to support changes in web browsers and evolving accessibility standards in web browsers.
The chat box is designed to work with screen readers, including JAWS, and is responsive to screen magnifiers, browser zoom controls, and browser color contrast color schemes.
We do basic in-house testing using JAWS and NVDA. We welcome testing by campus and other accessibility offices and integrate actionable improvements made by accessibility experts whenever possible. The chat box has received numerous accessibility reviews by university campus offices over the years, with feedback folded into the chat box following receipt of results.
We strive to provide good accessibility out-of-the box in our default starting chat box skins. Customers can extensively customize these chat skins through CSS and can edit chat snippets to provide additional elements if desired.
Embedded (iframe) chat boxes: The chat box is created as a full HTML document, and a title can optionally be provided. If a title is provided in the chat skin editor, this forms the HTML document's title. It is also possible to optionally provide a title for the iframe itself in the chat snippet, but this may be redundant if the chat box already has its own title.
Focus indicator: The chat box has visible focus for the various options like sound, email transcript, and send file. If desired, this can be emphasized by providing additional CSS customization to complement the specific chat skin design. Here is example CSS for focus:
#file:focus span.sprite{background-position:-45px 0;width:15px;height:14px; outline: 2px solid yellow; border:2px solid yellow;}
#mail:focus span.sprite{background-position:-27px 0;width:17px;height:14px; outline: 2px solid yellow; border:2px solid yellow;}
#sounds:focus span.sprite{background-position:0 0;width:10px;height:14px; outline: 2px solid yellow; border:2px solid yellow;}
#popout:focus span.sprite{background-position:-60px 0;width:17px;height:14px; outline: 2px solid yellow; border:2px solid yellow;}
We welcome feedback or questions through any of our standard support channels.
FAQ URL: