El teu chatbot és realment utilitzable per a tothom?

Els chatbots tenen un problema d’accessibilitat

Els chatbots d’atenció al client s’han convertit en l’opció de contacte principal — i sovint única — de molts productes digitals. L’expectativa és clara: si necessites ajuda, obre el xat. Si el xat no et funciona, sovint no hi ha res més.

Per als usuaris amb discapacitat, aquesta situació és sovint insostenible. La majoria de chatbots comercials no compleixen els requisits bàsics d’accessibilitat. Els usuaris de lectors de pantalla no poden sentir els missatges a mesura que arriben. Els usuaris de teclat queden atrapats dins del giny de xat i no en poden sortir. Els usuaris amb discapacitats motrius troben objectius tàctils massa petits per prémer de manera fiable. Els usuaris amb discapacitats cognitives afronten murs de text i cap manera clara de recuperar-se d’una consulta mal interpretada.

Això importa tant èticament com legalment. La Llei Europea d’Accessibilitat, en vigor des del juny de 2025, cobreix els canals digitals d’atenció al client de les empreses dins del seu àmbit — que inclouen les interfícies de chatbot. L’ADA als Estats Units s’ha aplicat als chatbots en litigis sobre accessibilitat web. Si un chatbot és un canal de servei principal, un chatbot inaccessible és una exclusió del servei.

Les set fallades d’accessibilitat de chatbots més habituals

1. Absència de regions actives ARIA

Quan arriba un missatge nou a una finestra de xat, un usuari de lector de pantalla necessita sentir-lo. Però els lectors de pantalla només anuncien el contingut que se’ls ha indicat que és important i dinàmic. Sense una regió activa ARIA que embolcalli el contenidor dels missatges de xat, els missatges apareixen visualment però són completament silenciosos per als usuaris de lectors de pantalla.

<!-- Sense regió activa: els missatges nous no s'anuncien -->
<div class="chat-messages">
  <!-- Els missatges s'afegeixen aquí dinàmicament -->
</div>

<!-- Amb regió activa: els missatges nous s'anuncien a mesura que arriben -->
<div
  class="chat-messages"
  role="log"
  aria-live="polite"
  aria-label="Conversa de xat"
>
  <!-- Els missatges s'afegeixen aquí dinàmicament -->
</div>

role="log" està definit específicament a ARIA per a converses de xat i fluxos de missatges. aria-live="polite" anuncia el contingut nou després que l’usuari faci una pausa — menys disruptiu que assertive per a un context conversacional.

2. Trampes de teclat

Una trampa de teclat es produeix quan un usuari entra amb el tabulador en un component i ja no en pot sortir — queda atrapat. Els ginys de chatbot són un dels llocs més habituals on apareixen trampes de teclat.

La solució requereix implementar una gestió del focus adequada: el tabulador i Maj+Tab han de navegar per tots els elements interactius dins del xat, i Escape ha de tancar el xat i tornar el focus a l’element que el va activar. El criteri WCAG 2.1.2 Sense trampes per al focus del teclat (nivell A) cobreix aquest requisit.

Provar-ho és senzill: obre el teu chatbot fent servir només el teclat, tabula per tots els elements interactius que hi ha dins i confirma que en pots sortir amb Escape o amb un botó de tancament clarament visible.

3. Contrast de color insuficient

Els chatbots sovint es representen amb els colors de la marca, i els colors de la marca sovint no es proven contra els requisits de contrast de WCAG. Fallades habituals:

Text de bombolla de xat que no compleix un contrast de 4,5:1 respecte al fons de la bombolla
Text del marcador de posició del camp d’entrada per sota dels llindars de contrast
Text de la marca de temps en un gris molt clar

El requisit de contrast s’aplica a la interfície del chatbot igual que a la resta del teu lloc — no hi ha excepció per als ginys.

4. Camps d’entrada i botons sense etiqueta

El camp d’entrada del xat — “Escriu el teu missatge…” — ha de tenir una etiqueta associada programàticament, no només text de marcador de posició. El text del marcador de posició desapareix tan bon punt l’usuari comença a escriure i no és un substitut fiable d’una etiqueta.

El botó d’enviar, el botó de minimitzar, el botó de tancar i qualsevol altre control interactiu han de tenir noms accessibles. Un botó “enviar” només amb icona, sense text i sense aria-label, és anunciat pels lectors de pantalla com a “botó” sense cap descripció de la seva finalitat.

<!-- Sense etiqueta: falla -->
<input type="text" placeholder="Escriu un missatge...">
<button><svg><!-- icona d'enviar --></svg></button>

<!-- Amb etiqueta i aria-label: passa -->
<label for="chat-input" class="sr-only">Escriu el teu missatge</label>
<input type="text" id="chat-input" placeholder="Escriu un missatge...">
<button aria-label="Envia el missatge">
  <svg aria-hidden="true"><!-- icona d'enviar --></svg>
</button>

5. Objectius tàctils massa petits per als usuaris amb discapacitats motrius

WCAG 2.2 va introduir 2.5.8 Mida de l’objectiu (mínima) al nivell AA, que exigeix que els elements interactius tinguin una mida d’objectiu mínima de 24×24 píxels CSS. Moltes interfícies de chatbot situen els botons de tancar, minimitzar i emoji a 16–20 píxels — molt per sota d’aquest llindar.

Per als usuaris amb discapacitats motrius, tremolors o control motor fi reduït, els objectius petits són realment inutilitzables. Els botons d’acció del chatbot són un dels elements de la interfície afectats amb més freqüència.

6. Cap avís de temps d’espera ni ampliació de sessió

Molts chatbots finalitzen una sessió inactiva després d’un període determinat. Quan això passa sense avís, els usuaris que triguen més a redactar o llegir missatges — incloent-hi molts usuaris amb discapacitats cognitives o motrius — poden perdre la conversa sense cap oportunitat d’ampliar la sessió.

El criteri WCAG 2.2.1 Temps ajustable (nivell A) exigeix que, quan s’estableix un límit de temps, els usuaris el puguin desactivar, ampliar, o bé que el límit sigui d’almenys 20 hores. Un chatbot que finalitza les sessions després de 5 minuts d’inactivitat sense avís no és conforme.

7. Llenguatge complex i cap recuperació d’errors

Els chatbots només són útils si els usuaris s’hi poden comunicar de manera efectiva. Per als usuaris amb discapacitats cognitives, dificultats d’aprenentatge o nivells d’alfabetització més baixos, un chatbot que fa servir argot, ofereix llargs murs de text sense estructura o falla en silenci quan no entén una consulta és funcionalment inaccessible.

Contingut de chatbot accessible:

Fa servir llenguatge planer (frases curtes, paraules comunes)
Divideix les respostes en unitats fàcils de llegir en lloc de presentar paràgrafs
Ofereix una recuperació d’errors clara: quan el bot no entén, ho diu explícitament i ofereix alternatives específiques
Ajuda els usuaris a reformular les consultes en lloc de dir només “No ho he entès”

Nous criteris de WCAG 2.2 especialment rellevants per als chatbots

WCAG 2.2 va afegir diversos criteris de conformitat que s’apliquen amb força particular a les interfícies de xat:

2.4.11 Focus no ocult (mínim) — nivell AA. Quan un giny de xat està obert, no ha d’amagar completament l’element enfocat darrere seu. Molts ginys de xat apareixen sobre el contingut de la pàgina i oculten l’element enfocat quan els usuaris tabulen per la pàgina subjacent.

2.4.12 Focus no ocult (millorat) — nivell AAA. L’element enfocat hauria de ser completament visible.

2.5.7 Moviments d’arrossegament — nivell AA. Si el teu giny de xat es pot reposicionar arrossegant-lo, ha d’existir una alternativa d’un sol punter.

2.5.8 Mida de l’objectiu (mínima) — nivell AA, tal com s’ha cobert més amunt.

Com provar el teu chatbot

Només amb teclat: obre el xat sense fer servir el ratolí. Tabula per tots els elements. Verifica que pots escriure, enviar missatges i tancar el giny fent servir només el teclat. Confirma que en pots sortir amb Escape.
Lector de pantalla: obre NVDA (Windows, gratuït) o VoiceOver (Mac/iOS, integrat) i interactua amb el xat. Verifica que els missatges s’anuncien a mesura que arriben. Verifica que els camps d’entrada i els botons estan etiquetats correctament.
Amplia al 200%: verifica que la interfície del xat no es desborda ni oculta el contingut de la pàgina quan el text s’amplia.
Comprovació del contrast: fes servir una extensió de navegador com axe DevTools o WAVE per comprovar el contrast a la interfície del xat.
Mòbil: prova les mides dels objectius tàctils i verifica que el xat funciona amb les funcions d’accessibilitat d’iOS/Android (VoiceOver, TalkBack).

Si integres un chatbot de tercers, avalua l’accessibilitat del proveïdor abans de triar-lo. Demana el seu VPAT (Voluntary Product Accessibility Template) per entendre el nivell de conformitat que declara. Prova el giny tu mateix — les declaracions del proveïdor no substitueixen les proves directes.

Incorporar l’accessibilitat del chatbot des del principi és molt més barat que adaptar-la després. Si estàs avaluant plataformes de chatbot, passa cada candidat per aquesta llista de comprovació abans de comprometre-t’hi.

Per a una revisió completa del teu chatbot i de la resta de la teva experiència digital d’atenció al client, parla amb el nostre equip o comença amb una anàlisi gratuïta de les teves pàgines públiques.