Chatbot Accessibility Playbook

Recommendation 4.3.12:
Clearly distinguish user messages from chatbot messages

Benefits Users

Icon for VisualIcon for CognitiveVisual | Cognitive

Icon for StandardRelevant W3C Guidance

Phase 1: Gather & Organize

[none]


Phase 2: Design & Implement

Icon for Design QuestionDesign Question

  • What methods will you use to distinguish chatbot messages from user messages?

    • Use multiple methods to distinguish user messages from chatbot messages. These methods shouldn’t reduce accessibility, and you may have style limitations to consider as well.

Icon for ExamplesExamples

  • Chatbot messages are aligned to the left, user messages to the right

  • Use different colors for the two senders

  • Label each message with the name of the sender

  • Use profile pictures to distinguish the user and the chatbot

  • Make sure the message alt text includes the sender’s identity


Phase 3: Test & Evaluate

Icon for Ask the UserAsk the User

  • How easy was it to identify which messages are from you and which are from the chatbot?


References

28