AI Chatbot Accessibility: WCAG 2.2 Compliance Guide
An accessible AI chatbot is a legal requirement, not a nice-to-have. Here's the WCAG 2.2 AA conformance recipe — ARIA patterns, keyboard handling, screen-reader behavior, and a 30-point audit you can run today.
13 min readUpdated Accessibility
Try EzyConn Free Why this matters in 2026
ADA lawsuits targeting chat widgets crossed 4,000 in 2025. The EU's European Accessibility Act took effect June 28, 2025 — non-compliant chatbots on e-commerce and digital service sites carry six- and seven-figure penalties. Build it accessible from day one.
The 30-Point Audit
Structure
- • role="log" on conversation transcript
- • aria-live="polite" for bot responses
- • aria-label on widget toggle button
- • Heading hierarchy (h1, h2) inside expanded chat
- • Landmark roles (region, complementary)
Keyboard
- • Tab to focus widget toggle
- • Enter/Space to open
- • Esc to close
- • Tab through messages, input, send button
- • Focus trap inside open widget
- • Visible focus indicator (min 2px, 3:1 contrast)
Color & Contrast
- • Text contrast 4.5:1 minimum (AA)
- • UI element contrast 3:1
- • Don't rely on color alone (use icons + text)
- • Respect prefers-reduced-motion
- • Dark mode contrast tested
Screen Reader
- • Bot name announced on first message
- • Typing indicator audible (or skippable)
- • Quick-reply buttons read as buttons
- • Send button has accessible name
- • Errors announced via aria-live="assertive"
Content
- • Plain language (Grade 8 reading level or below)
- • Avoid emoji-only meaning
- • Spell out abbreviations on first use
- • Alt text on bot-sent images
- • Captions on bot-sent video
Mobile
- • Touch targets ≥44×44px
- • No double-tap-to-zoom blocked
- • Respect dynamic font size
- • Pinch-zoom not disabled
- • Orientation lock not forced
Minimal Accessible Chat Markup
<button
aria-label="Open EzyConn chat"
aria-expanded="false"
aria-controls="chat-panel"
>Chat</button>
<section
id="chat-panel"
role="region"
aria-label="EzyConn chat window"
hidden
>
<div role="log" aria-live="polite" aria-atomic="false">
<!-- Messages append here -->
</div>
<form>
<label for="chat-input">Type a message</label>
<input id="chat-input" type="text" autocomplete="off" />
<button type="submit">Send</button>
</form>
</section>Common Failures to Avoid
- • Div soup. Buttons made of divs without role="button".
- • Silent bot replies. No aria-live = screen readers miss the message.
- • Forced color. Hard-coded background ignoring user's OS theme.
- • No focus trap. Tab key escapes back to page when modal is open.
- • Animation without controls. Typing indicators that ignore prefers-reduced-motion.
Frequently Asked Questions
Legally required?
Yes — ADA in the US, European Accessibility Act in the EU since June 2025.
#1 failure?
Missing aria-live announcement on bot replies.
Accessible by default
EzyConn ships WCAG 2.2 AA-conformant out of the box — ARIA, keyboard, screen-reader, reduced motion. Audit-ready.
Start FreeLast updated . View more guides.