Skip to content

Instantly share code, notes, and snippets.

@mmazanec22
Last active April 26, 2019 08:44
Show Gist options
  • Save mmazanec22/cf3240761c87ca8f5d8cd3ad74d2a324 to your computer and use it in GitHub Desktop.
Save mmazanec22/cf3240761c87ca8f5d8cd3ad74d2a324 to your computer and use it in GitHub Desktop.
Intercom Accessibility Hack

***** UPDATE 11/29/2018: INTERCOM IS NOW ACCESSIBLE! *****

See this Tweet: https://twitter.com/destraynor/status/1067943722971672576

Read more details: https://www.intercom.com/help/faqs-and-troubleshooting/the-intercom-messenger/is-the-intercom-messenger-accessible


By default, Intercom is not accessible to people navigating with the keyboard or using screen readers. This little script is a stop-gap solution developed by the City of Asheville to comply with Section 508. It does the following:

  • Shows keyboard focus by making the background color lighter
  • Shows/reads a message of your choosing (we went with a phone number because it gives the most comparable experience)

To use: Copy and paste this below the Intercom script tags on your site. Customize it to your needs by changing the message and colors, as noted by all caps text.

We would love to know how many people share our accessible live chat needs. Please star this gist if you end up using it. If you're interested in collaborating on a longer-term solution, please contact Melanie at the City of Asheville IT department.

<style type="text/css">
#live-chat-accessibility-message {
display: none;
/* CHANGE THIS BACKGROUND COLOR TO BE SLIGHTLY LIGHTER THAN YOUR INTERCOM COLOR TO SHOW FOCUS */
background-color: #f4903e;
position: fixed;
background-attachment: scroll;
right: 6vw;
bottom: 18vh;
padding: 1em;
color: white;
font-size: 1em;
font-weight: bolder;
border-radius: 10px;
font-family: sans-serif;
}
#live-chat-accessibility-message.visible {
display: unset;
}
</style>
<script type="text/javascript">
// CUSTOMIZE THIS ALT TEXT TO PROVIDE YOUR PHONE NUMBER
const altText = 'Live chat is not accessible without mouse. Please call PHONE NUMBER for assistance.'
const addAria = setInterval(function() {
const frameContainer = document.getElementById('intercom-container')
if(frameContainer) {
// Get the intercom element that can change color to show focus
const intercomFrame = frameContainer.getElementsByTagName('iframe')[0].contentDocument
const intercom = intercomFrame.getElementsByClassName('intercom-launcher')[0]
const accessibilityMessageDiv = document.createElement('div')
accessibilityMessageDiv.setAttribute('id', 'live-chat-accessibility-message')
document.body.appendChild(accessibilityMessageDiv)
intercom.tabIndex = 0
intercom.setAttribute('role', 'img')
intercom.setAttribute('alt', altText)
intercom.setAttribute('title', altText)
// This div should contain the same message for folks not using the mouse
accessibilityMessageDiv.innerHTML = altText
intercom.onfocus = function() {
// CHANGE THIS COLOR TO MATCH THE BACKGROUND COLOR OF FOCUSED INTERCOM (SEE STYLE TAG)
this.style['background-color'] = '#f4903e'
// Visible div style is display: unset, as set above
accessibilityMessageDiv.setAttribute('class', 'visible')
}
intercom.onblur = function() {
this.style['background-color'] = 'unset'
// Without the 'visible' class, the display is set to 'none'
accessibilityMessageDiv.setAttribute('class', null)
}
clearInterval(addAria)
}
}, 100)
function addLoadEvent(func) {
const oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(addAria);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment