Accessible chatbot and live chat to WCAG 2.2 AA

Why chat widgets are so often unusable

A chat widget is a small piece of software that lands on top of your website. That is exactly where it tends to go wrong: the window is a nameless block in the code, new replies are never passed to a screen reader, the input field has only a grey hint instead of a label and the buttons are too pale to see. Anyone not using a mouse cannot get in, or cannot get out again.

This is not a theoretical problem. In the Dutch Digimonitor study of municipal chatbots, not a single chatbot examined in 2026 met the accessibility requirements. The most common faults: buttons without a name, no keyboard operation and a chat status that never reaches the screen reader.

The difference in practice

An inaccessible chat

The screen reader announces only 'button'. The reply appears without anyone hearing it. Tab takes you into an invisible window and Escape does nothing. Grey text disappears into the background.

An accessible chat

The button is called 'Open chat, 2 unread messages'. Every completed reply is announced once with the sender's name. Escape closes and focus returns. All text meets the required contrast.

What WillieChat does as standard

Fully keyboard operable

Every button, link, emoji and attachment is reachable with Tab, with a clearly visible focus outline. Escape closes the menu, the emoji picker or the whole window and returns focus to where you were.

Screen readers get everything

The window is a real dialog with a name. New replies, the notice that the assistant is typing, queue status and errors go to the screen reader through separate live regions, without repeating the text letter by letter.

Contrast that adapts

Choose a light brand colour and the widget switches to dark text and a darker accent for links and focus outlines. The admin panel warns you when a colour gives too little contrast.

Labels and real error messages

Every input field has a label, even when it is visually hidden. If something goes wrong you get text with a suggestion instead of just a red border, and your typed message is preserved.

Language per message

The widget sets the right language code on the window and on individual messages. A screen reader then really pronounces an English reply on a Dutch page in English.

No unwanted surprises

The chat never grabs focus on its own, respects the system setting for reduced motion and the visitor can mute the notification sound.

Checklist: is your current chat accessible?

Can you open and close the chat without a mouse?

Does a screen reader hear the reply as soon as it is ready?

Does the input field have a real label?

Is the focus outline visible everywhere?

Does the closed window stay out of the tab order?

Does the chat still work at 200 percent zoom?

How to switch it on

Place the widget on your site with one line of code. The accessibility features are on immediately; there is nothing to configure.

Pick your brand colour in the admin panel. You see straight away whether the contrast is sufficient and the widget adjusts the text colour itself.

If you also want read-aloud, switch it on under Settings, tab General, block Accessibility.

Frequently asked questions

Does a purchased chat widget fall under my own accessibility duty?

Yes. The exemption for third-party content only covers content you do not pay for, do not develop and have no say over. A paid chat widget on your own domain meets none of those three conditions, so it simply counts.

Is WillieChat certified?

No, and we deliberately avoid that word: there is no certificate for accessibility. The widget is built to WCAG 2.2 AA and we test with keyboard and screen reader ourselves. An independent audit using the WCAG-EM method is planned; we will share the report as soon as it exists.

Does the chat work with NVDA, JAWS and VoiceOver?

Yes. The widget uses standard HTML and ARIA, exactly what those tools are built on. The content sits in an open shadow root, so accessibility scanners such as axe and Lighthouse can reach it too.

What does the chat do for people who find reading hard?

That is what the optional read-aloud function is for: a Read aloud button then appears under every reply, and visitors can also have replies read automatically. It is an addition, not a replacement for screen reader support.

Will this slow down my website?

No. The widget loads separately from your page and weighs about a hundred kilobytes. Accessibility lives in the structure of the code, not in extra files or external services.

Accessible chatbot