Is jouw chatbot echt door iedereen te gebruiken?

Chatbots hebben een toegankelijkheidsprobleem

Klantenservicechatbots zijn voor veel digitale producten het primaire — en vaak enige — contactkanaal geworden. De verwachting is duidelijk: als je hulp nodig hebt, open je de chat. Als de chat niet voor jou werkt, is er vaak niets anders.

Voor gebruikers met een beperking is deze situatie vaak onhoudbaar. De meeste commerciële chatbots voldoen niet aan de basiseisen voor toegankelijkheid. Gebruikers van schermlezers kunnen berichten niet horen zodra ze binnenkomen. Toetsenbordgebruikers raken opgesloten in de chatwidget en kunnen er niet uit. Gebruikers met motorische beperkingen komen aanraakdoelen tegen die te klein zijn om betrouwbaar aan te tikken. Gebruikers met cognitieve beperkingen krijgen muren van tekst voor de kiezen, zonder duidelijke manier om te herstellen van een verkeerd begrepen vraag.

Dit doet er zowel ethisch als juridisch toe. De European Accessibility Act, van kracht sinds juni 2025, dekt de digitale klantenservicekanalen van bedrijven die eronder vallen — waaronder chatbotinterfaces. De ADA in de Verenigde Staten is in rechtszaken over webtoegankelijkheid op chatbots toegepast. Als een chatbot een primair servicekanaal is, is een ontoegankelijke chatbot een uitsluiting van dienstverlening.

De zeven meest voorkomende toegankelijkheidsfouten bij chatbots

1. Ontbrekende ARIA live regions

Wanneer er een nieuw bericht in een chatvenster binnenkomt, moet een gebruiker van een schermlezer het kunnen horen. Maar schermlezers kondigen alleen inhoud aan waarvan ze te horen hebben gekregen dat die belangrijk en dynamisch is. Zonder een ARIA live region om de container met chatberichten heen, verschijnen berichten wel visueel, maar zijn ze volledig stil voor gebruikers van schermlezers.

<!-- Zonder live region: nieuwe berichten worden niet aangekondigd -->
<div class="chat-messages">
  <!-- Berichten worden hier dynamisch toegevoegd -->
</div>

<!-- Met live region: nieuwe berichten worden aangekondigd zodra ze binnenkomen -->
<div
  class="chat-messages"
  role="log"
  aria-live="polite"
  aria-label="Chatgesprek"
>
  <!-- Berichten worden hier dynamisch toegevoegd -->
</div>

role="log" is in ARIA specifiek gedefinieerd voor chatgesprekken en berichtenstromen. aria-live="polite" kondigt nieuwe inhoud aan nadat de gebruiker pauzeert — minder verstorend dan assertive in een conversationele context.

2. Toetsenbordvallen

Een toetsenbordval treedt op wanneer een gebruiker met Tab in een component terechtkomt en er niet meer met Tab uit kan — ze zitten vast. Chatbotwidgets behoren tot de meest voorkomende plekken waar toetsenbordvallen opduiken.

De oplossing vereist een goed focusbeheer: Tab en Shift+Tab moeten door interactieve elementen binnen de chat navigeren, en Escape moet de chat sluiten en de focus terugbrengen naar het element dat de chat opende. WCAG 2.1.2 No Keyboard Trap (niveau A) dekt deze eis.

Dit testen is eenvoudig: open je chatbot met alleen het toetsenbord, tab door alle interactieve elementen erin en controleer of je eruit kunt met Escape of een duidelijk zichtbare sluitknop.

3. Onvoldoende kleurcontrast

Chatbots worden vaak weergegeven in merkkleuren, en merkkleuren worden vaak niet getoetst aan de WCAG-contrasteisen. Veelvoorkomende fouten:

• Tekst in chatbubbels die niet voldoet aan een contrast van 4,5:1 tegen de bubbelachtergrond
• Tijdelijke aanduidingen (placeholders) in invoervelden onder de contrastdrempels
• Tekst van tijdstempels in zeer lichtgrijs

De contrasteis geldt voor de chatbotinterface net zoals voor de rest van je site — er is geen uitzondering voor widgets.

4. Niet-gelabelde invoervelden en knoppen

Het chatinvoerveld — “Typ je bericht…” — moet een programmatisch gekoppeld label hebben, niet alleen placeholdertekst. Placeholdertekst verdwijnt zodra de gebruiker begint te typen en is geen betrouwbaar alternatief voor een label.

De verzendknop, minimaliseerknop, sluitknop en alle andere interactieve besturingselementen moeten toegankelijke namen hebben. Een verzendknop met alleen een pictogram, zonder tekst en zonder aria-label, wordt door schermlezers aangekondigd als “knop” zonder enige beschrijving van het doel.

<!-- Ontbrekend label: faalt -->
<input type="text" placeholder="Typ een bericht...">
<button><svg><!-- verzendpictogram --></svg></button>

<!-- Met label en aria-label: slaagt -->
<label for="chat-input" class="sr-only">Typ je bericht</label>
<input type="text" id="chat-input" placeholder="Typ een bericht...">
<button aria-label="Bericht verzenden">
  <svg aria-hidden="true"><!-- verzendpictogram --></svg>
</button>

5. Aanraakdoelen te klein voor gebruikers met motorische beperkingen

WCAG 2.2 introduceerde 2.5.8 Target Size (Minimum) op niveau AA, dat vereist dat interactieve elementen een minimale doelgrootte van 24×24 CSS-pixels hebben. Veel chatbot-UI’s plaatsen sluit-, minimaliseer- en emojiknoppen op 16–20 pixels — ruim onder deze drempel.

Voor gebruikers met motorische beperkingen, tremoren of verminderde fijne motoriek zijn kleine doelen werkelijk onbruikbaar. De actieknoppen van de chatbot behoren tot de meest getroffen UI-elementen.

6. Geen time-outwaarschuwing of sessieverlenging

Veel chatbots beëindigen een inactieve sessie na een bepaalde periode. Wanneer dit zonder waarschuwing gebeurt, kunnen gebruikers die er langer over doen om berichten op te stellen of te lezen — waaronder veel gebruikers met cognitieve of motorische beperkingen — hun gesprek verliezen zonder enige mogelijkheid om de sessie te verlengen.

WCAG 2.2.1 Timing Adjustable (niveau A) vereist dat gebruikers, wanneer er een tijdslimiet is ingesteld, deze kunnen uitzetten, verlengen, of dat de limiet ten minste 20 uur bedraagt. Een chatbot die sessies na 5 minuten inactiviteit zonder waarschuwing beëindigt, voldoet niet.

7. Complexe taal en geen foutherstel

Chatbots zijn alleen nuttig als gebruikers er effectief mee kunnen communiceren. Voor gebruikers met cognitieve beperkingen, leerstoornissen of een lager taalniveau is een chatbot die jargon gebruikt, lange muren van tekst zonder structuur biedt of stilletjes faalt wanneer hij een vraag niet begrijpt, functioneel ontoegankelijk.

Toegankelijke chatbotinhoud:

• Gebruikt eenvoudige taal (korte zinnen, gangbare woorden)
• Splitst antwoorden op in scanbare eenheden in plaats van alinea’s te presenteren
• Biedt duidelijk foutherstel: wanneer de bot iets niet begrijpt, zegt hij dat expliciet en biedt hij specifieke alternatieven
• Ondersteunt gebruikers bij het herformuleren van vragen in plaats van alleen “Dat begreep ik niet” te zeggen

Nieuwe WCAG 2.2-criteria die vooral relevant zijn voor chatbots

WCAG 2.2 voegde verschillende succescriteria toe die met bijzondere kracht van toepassing zijn op chatinterfaces:

2.4.11 Focus Not Obscured (Minimum) — niveau AA. Wanneer een chatwidget open is, mag deze het gefocuste element niet volledig achter zich verbergen. Veel chatwidgets verschijnen over de pagina-inhoud en verbergen het gefocuste element wanneer gebruikers door de onderliggende pagina tabben.

2.4.12 Focus Not Obscured (Enhanced) — niveau AAA. Het gefocuste element moet volledig zichtbaar zijn.

2.5.7 Dragging Movements — niveau AA. Als je chatwidget met slepen kan worden verplaatst, moet er een alternatief met één aanwijzer bestaan.

2.5.8 Target Size (Minimum) — niveau AA, zoals hierboven behandeld.

Hoe je je chatbot test

1. Alleen toetsenbord: open de chat zonder een muis te gebruiken. Tab door alle elementen. Controleer of je kunt typen, berichten verzenden en de widget sluiten met alleen het toetsenbord. Bevestig dat je met Escape kunt afsluiten.

2. Schermlezer: open NVDA (Windows, gratis) of VoiceOver (Mac/iOS, ingebouwd) en werk met de chat. Controleer of berichten worden aangekondigd zodra ze binnenkomen. Controleer of invoervelden en knoppen correct gelabeld zijn.

3. Inzoomen tot 200%: controleer of de chatinterface niet buiten de rand valt of pagina-inhoud verbergt wanneer de tekst wordt vergroot.

4. Contrastcontrole: gebruik een browserextensie zoals axe DevTools of WAVE om het contrast in de chat-UI te controleren.

5. Mobiel: test de grootte van aanraakdoelen en controleer of de chat werkt met de toegankelijkheidsfuncties van iOS/Android (VoiceOver, TalkBack).

Als je een chatbot van een derde partij integreert, beoordeel dan de toegankelijkheid van de leverancier voordat je kiest. Vraag om hun VPAT (Voluntary Product Accessibility Template) om hun geclaimde conformiteitsniveau te begrijpen. Test de widget zelf — beweringen van leveranciers zijn geen vervanging voor directe tests.

Toegankelijkheid van een chatbot vanaf het begin inbouwen is aanzienlijk goedkoper dan het achteraf inbouwen. Als je chatbotplatforms evalueert, loop dan elke kandidaat langs deze checklist voordat je je vastlegt.

Voor een uitgebreide beoordeling van je chatbot en de rest van je digitale klantenservice-ervaring, praat met ons team of begin met een gratis scan van je openbare pagina’s.