Widget Accessibility at Drift

At Drift, we think about Chatbot Accessibility as Conversational Marketing made possible for

  • All Teams within an Organization 
  • Technical and non-Technical Users
  • International Users
  • Blind or Visually Impaired Users
  • Motor Impaired Users

Widget Accessibility

Drift is now WCAG 2.0 Level A compliant! Some high-level features include

  • Users utilizing a screen reader are able to navigate through the widget
  • Users interacting solely with a keyboard can fully interact with the widget
  • Visually impaired users can interact with the widget in a high-contrast state
  • Hover states for all buttons and links which can visually change when hovered over or tabbed to
  • Messages received in live chat can be read out loud and verbally differentiate between the end user and agent

Keyboard Navigation

With the Tab (and Shift + Tab) keys, the widget icon can now be navigated to with the keyboard for visually impaired and blind users. The is possible because the Drift Widget Icon is land marked so a screen reader will list the chat widget as a piece of functionality on any website that has it and make it easier to navigate to. 

ARIA HTML attributes

Accessible Rich Internet Applications (ARIA) supplements HTML with information about what different elements on the web page are, so that interactions and widgets commonly used in applications can be passed to Assistive Technologies when there is not otherwise a mechanism. Screen readers (one example of an assistive technology) then have additional context about the webpage and can narrate exactly what is happening. (learn more about Aria) Within Drift, this matters because:

  • Buttons that are just icons have underlying aria-label attributes that prompt the screen reader to read the purpose of the button to the user
  • Switching between views on the widget will refocus on at the beginning of the keyboard navigation flow, providing a better navigation UX
  • Interactive elements are available by keyboard navigation:
    • Bot Questions
    • Email Capture
    • Calendar Invite (Picking Day, Picking Time, Changing Timezone)
    • Opening and Closing chats
    • Creating a New Conversation
    • Navigating between existing conversations 

If you're curious about some visual examples of how screen readers work (and can fail to), check out this article from Medium titled We Need To Talk About Accessibility on Chatbots.

If you have questions, concerns, or suggestions, please et us know! 

Did this help answer your question?

thumbs up
thumbs down

Thanks for the feedback! 🙏🏽

Help by drift