Add Mobile Accessibility for Chat

Most browsers don’t support hiding background content for screen readers on mobile phones when the Chat modal opens. By adding hooks to the code, you streamline the experience for these users to focus on Chat. Once the window is closed, the full web page content returns.

The phone on the left shows what the screen reader accesses when the modal opens. The one on the right demonstrates the experience with the inert function added.

This solution provides code that temporarily hides document body children and keep only the Embedded Service Web widget accessible and visible to assistive technology.

Start with a base page and our code snippet with an empty onBodyLoaded JavaScript method. The body page content is wrapped with a div with the id #body-content and the body has an onload handler specified. You’ll use the CSS selector div.#body-content and implement the JavaScript method onBodyLoaded() after adding your snippet.

Base Page Code with Embedded Chat Code Snippet

onBodyLoaded Code

Next implement the JavaScript method onBodyLoaded to disable the div with id body-content whenever Embedded Chat is opened and re-enable body-content whenever Embedded Chat is minimized/closed. Define the JavaScript method onBodyLoaded in this step. For more help on adding event handlers for maximize, destroy, and minimize, see “Get Chat Event Notifications.”

Mobile Accessible Embedded Chat Example Code

Here’s the combined code for the steps you completed.