Chat - Web accessibility testing checklist - [Updated 2025] Atomic Accessibility

How to test a chat

Gherkin Checklist

Given that I am on a screen with a chat

1 Keyboard only

WHEN I use the arrow key to browse to the chat I SEE the chat scrolls into view
Then when I use the tab key I SEE individual controls are focusable in meaningful order (but not the chat itself)
When I use the chat I SEE notifications when a new message is received

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow key to browse to the chat
- I HEAR the chat purpose is clear
- I HEAR controls in the chat use appropriate roles like button, text field, etc.
- I HEAR status changes (Ex: User is typing…) are announced
- I HEAR chat is intuitive to discover, open, close
Then when I use the tab key I HEAR individual controls are focusable in meaningful order (but not the chat itself)
When I use the chat I HEAR notifications when a new message is received

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to browse to a chat
- I HEAR the chat purpose is clear
- I HEAR controls in the chat use appropriate roles like button, text field, etc.
- I HEAR status changes (Ex: User is typing…) are announced
- I HEAR chat is intuitive to discover, open, close
When I use the chat I HEAR notifications when a new message is received

4 Device settings

When I use Custom font settings I SEE text resizes up to 200% without losing information

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Individual controls inside the chat are focusable
Arrow keys	Browses content and controls (when using screen reader)

2 Mobile screenreader gestures

When I use	I hear
Swipe	The screenreader reads individual content inside the chat

3 Screenreader output

Reads	I hear
Name	The chat purpose is clear
Role	Controls in the chat use appropriate roles like button, text field, etc.
State	Status changes (ex: user is typing…) are announced
Group	Chat is intuitive to discover, open, close

4 Device settings

When I use	I see
Custom font settings	Text resizes up to 200% without losing information

Chat comes in multiple flavors

Whole page AI / LLM tools
Popup windows
Injected widgets

Common features and requirements

It’s impossible to sum up every possible acceptance criteria for every variety of chat, but they all contain a mashup of components, each of which must be accessible.

Web Chat

How to test a chat

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

4 Device settings

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

4 Device settings

Chat comes in multiple flavors

Common features and requirements

Dynamic content

Form inputs

Notifications, errors or alerts