Intercom Accessibility Hack

README.md

***** 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.

theHack.html

<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>