Chatbot Accessibility Playbook

Recommendation 4.4.1:
Make sure the user can consistently navigate between chatbot window and the webpage

Benefits Users

Icon for VisualIcon for CognitiveIcon for PhysicalVisual | Cognitive | Physical

Icon for StandardRelevant W3C Guidance

Phase 1: Gather & Organize

Icon for Additional InformationAdditional Information

  • Navigation is the transition from a website’s content to a chatbot and back again. Many chatbots are visualized as a conversation sub-window superimposed on top of a website, in which case “navigation” describes shifting focus and control between the website and the sub-window. Navigation is compromised when the user cannot alternately interact with the website and chatbot window at will.


Phase 2: Design & Implement

Icon for TipTip

  • The chatbot window should be visible against the website, supporting good color contrast, responsive design, and magnification.

  • Add an element to the tab order to warn the keyboard users so they don’t accidentally leave the chatbot

Icon for ExamplesExamples

  • Offer a hotkey that brings focus to the newest message in the chatbot window

  • Include the chatbot window in the tab order

  • Offer a shortcut to the chatbot at the top of the page

Icon for AntipatternAntipattern

  • The chatbot window should not be covered by tooltips or other content pertaining to the host website. Work with the development team to make both website and chatbot functionality accessible.


Phase 3: Test & Evaluate

Icon for Self CheckSelf Check

  • The user can consistently navigate to the chatbot, meaning the user can reliably go between the website and the chatbot.

  • When navigating to the chatbot, focus shows the most recent message

  • Chatbot activation mechanism or window is far enough from edge of the window that it can still be seen and activated with 200% magnification

  • Tab order proceeds left to right and top to bottom, including the chatbot window

Icon for Ask the UserAsk the User

  • Does the tab order make sense on this website?

    • This question is subjective; use a Likert scale. This question can be asked mid-study or post-study.

  • Can you consistently navigate to the chatbot?

    • This question is objective; compare the user’s response to an ideal value. This question can be asked mid-study or post-study.


References

6, 13, 22, 23, 27, 28