Ship ItLesson 9 of 11
Accessibility in Conversational UI
3 min readConversational UI for DesignersUpdated Apr 2, 2026
Accessibility in chat UI comes down to four things: ARIA live regions so screen readers announce new messages, keyboard paths into every control (including prompt chips), focus management after sending, and WCAG AA contrast on bubble colors. This lesson covers each.
Screen Reader Support
Chat interfaces are dynamic - messages appear, typing indicators pulse, and content streams in. Screen readers need explicit guidance.
ARIA Live Regions for New Messages
ARIA roles and live regions visualized
role="log" tells screen readers this is a chronological message list. aria-live="polite" announces new messages without interrupting current reading.
Label Message Roles Clearly
Accessible message role labeling
<div aria-label={`${message.role === 'user' ? 'You' : 'AI Assistant'} said`}>
{message.content}
</div>Announce Status Changes
Typing indicator announcement
<div role="status" aria-live="assertive">
{isTyping ? 'AI is typing...' : ''}
</div>Keyboard Navigation
- Input focus: Auto-focus the text input on page load. After sending a message, focus returns to the input.
- Message navigation: Let users Tab to messages for copy/action access. Arrow keys to navigate between messages.
- Suggested prompts: Make prompt chips keyboard-navigable with arrow keys and Enter to select.
- Send on Enter: Standard convention. Shift+Enter for newline. Make this configurable.
Enter to send, Shift+Enter for newline
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};Visual Accessibility
- Contrast: Message bubbles must meet WCAG AA contrast ratios (4.5:1 for text). White text on light blue fails - use dark text on light backgrounds.
- Don't rely on color alone: Distinguish user vs AI by position (left/right), avatar, and label - not just color. Color-blind users may not see the difference.
- Readable font sizes: Chat text should be at least 14px. Timestamps can be 12px. Never go below 11px for any text.
- Motion sensitivity: Respect prefers-reduced-motion for animations (message slide-in, typing dots) and provide static alternatives.