Chatbot Accessibility Playbook

Recommendation 4.3.9:
The current keyboard or mouse position should be visually distinct from other elements on the chatbot

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

  • Visual focus refers to the way a user interface changes visually in response to the mouse pointer or keyboard navigation location. This includes the hover behavior of interactive elements like buttons and form fieds under the mouse pointer and the visual distinction of the active button in the keyboard tab order from other buttons.

Icon for Read MoreRead More

  • This blog post goes into the design and development details of visual focus.


Phase 2: Design & Implement

Icon for TipTip

  • Make it clear where the visual focus is at all times, using both keyboard and mouse.

  • Consider using (accessible) tooltips to help the user keep track of the element currently under the mouse.


Phase 3: Test & Evaluate

Icon for Self CheckSelf Check

  • Is the mouse location or keyboard focus indicated visually whenever passing over an interactive object?

Icon for Ask the UserAsk the User

  • Can you identify where the focus is at all times?

    • This question could be subjective or objective. This question can be asked mid-study or post-study.

Icon for TestingTesting

  • Use the keyboard to navigate and interact with the chatbot. Are you aware of the currently active element at all times?



References

13, 23, 27