An accessible chat button is a real button element with a clear text label, reachable and usable with the keyboard, with a visible focus ring, enough contrast, a tap target of at least 24 × 24 CSS pixels, and motion that stops for visitors who ask for reduced motion. If it shows a greeting or an unread count, screen readers should hear about it without the button stealing focus.
The checklist
| Check | Why | WCAG 2.2 |
|---|---|---|
Use a real <button> (or role="button" with keyboard support) | Screen readers announce it as a button; Enter and Space work | 4.1.2 Name, Role, Value (A) |
| Give it a text label, e.g. "Open chat" | An icon alone has no name for screen readers | 4.1.2 (A), 1.1.1 Non-text Content (A) |
| Reachable with Tab, usable with Enter and Space | Keyboard and switch users can't click | 2.1.1 Keyboard (A) |
| Visible focus ring | Keyboard users need to see where they are | 2.4.7 Focus Visible (AA) |
| 3:1 contrast between the button and the page | So low-vision visitors can find it | 1.4.11 Non-text Contrast (AA) |
| Target at least 24 × 24 CSS px | Easier to tap for everyone | 2.5.8 Target Size (Minimum) (AA) |
| Animation can be stopped, and stops for reduced motion | Movement can distract or make some people unwell | 2.2.2 Pause, Stop, Hide (A); 2.3.3 Animation from Interactions (AAA) |
| Announce greetings and unread counts politely | Screen-reader users get the message without losing their place | 4.1.3 Status Messages (AA) |
| Greeting bubble can be dismissed | A message that pops up shouldn't block content | Good practice (in the spirit of 1.4.13 and 2.2.2) |
Labels that make sense
The label should say what happens: "Open chat" or "Chat with us". If the button also shows unread messages, include them: "Open chat (2 new messages)". When the chat is open and the same button closes it, change the label to "Close chat" and set aria-expanded to match.
Animated launchers and motion
- Respect the
prefers-reduced-motionsetting: replace movement with a still image or a gentle fade. - Avoid flashing entirely (more than three flashes a second can trigger seizures, WCAG 2.3.1).
- Keep idle movement subtle and pause it in background tabs.
- Content that moves for more than five seconds alongside other content needs a way to pause or stop it (WCAG 2.2.2), for example by stopping when the visitor closes the greeting.
Greeting bubbles
Show the greeting in a container with role="status" (or aria-live="polite"), so screen readers read it when there's a pause, without moving focus. Give it a close button with a label ("Dismiss message"), and don't reopen it on every page.
Test it in five minutes
- Press Tab from the top of the page until you reach the chat button. Is the focus ring visible?
- Press Enter, then Space. Does the chat open both times?
- Turn on VoiceOver (Mac: Cmd+F5) or NVDA (Windows) and move to the button. Does it say "button" and a clear name?
- Turn on reduced motion (macOS: Accessibility → Display → Reduce motion). Does the animation stop?
- Zoom the page to 200%. Is the button still visible and not covering content?
How Chatmello handles this
Chatmello's pet is a real <button> labelled "Open chat with <name>" (with the unread count when there is one), with a visible focus ring. Visitors who ask for reduced motion get a still pet, animations pause in background tabs, and the greeting bubble is a polite status message with a labelled dismiss button.
FAQ
Is an icon-only chat button accessible?
Only if it has a text label that screen readers can read, for example aria-label="Open chat". The visible icon alone isn't enough.
Do animated chat buttons fail WCAG?
Not by themselves. They need to respect reduced motion, avoid flashing, and let moving content be paused or stopped.
How big should the chat button be for accessibility?
WCAG 2.2 asks for at least 24 × 24 CSS pixels (level AA). Most chat buttons are around 56–64 px, which is comfortable.
Should the greeting bubble move focus?
No. Announce it as a polite status message so screen readers read it without moving the visitor's focus.
Is the chat window itself covered by this checklist?
No, only the button. The chat window is your chat tool's responsibility; check its accessibility documentation.
Does this make my site WCAG compliant?
It covers the chat button. Compliance depends on your whole site; use an accessibility audit for that.
Sources
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2, checked October 18, 2026
- W3C: Understanding Target Size (Minimum), checked October 18, 2026
- W3C: Understanding Status Messages, checked October 18, 2026
- MDN: prefers-reduced-motion, checked October 18, 2026
