Xatbots, assistents i interfícies conversacionals accessibles

Els assistents conversacionals s'han convertit en el primer punt de contacte de molts serveis: el xat de la seu electrònica, l'assistent de la banca, el bot d'atenció al client de la botiga, els assistents de veu. Per a algunes persones són una ajuda enorme (escriure en llenguatge natural en lloc de navegar per menús); per a d'altres, una barrera nova (missatges que apareixen sense avís, finestres que atrapen el focus, respostes llargues i vagues, sense manera d'arribar a una persona). Aquesta lliçó dona les claus perquè un xatbot sigui accessible en la seva interfície, en la seva conversa i en la seva integració amb el servei.

La interfície del xat: un component web més

Un xatbot web és un conjunt de components (botó d'obertura, panell, registre de missatges, camp d'entrada, botons de resposta ràpida) i ha de complir les WCAG 2.2 com qualsevol altre. Les fallades més freqüents en auditoria i com evitar-les:

• Botó d'obertura: sol ser una icona flotant sense nom. Ha de ser un <button> amb nom («Obre l'assistent virtual»), estat (aria-expanded), mida suficient (2.5.8) i no ha de tapar el contingut ni el peu de pàgina (al mòbil, amb text gran, tapa botons del mateix web).
• Obertura automàtica: el panell que s'obre sol als 5 segons amb so i el missatge «T'ajudo?» roba el focus (3.2.1, 3.2.5), interromp el lector de pantalla i distreu (objectiu 5 de COGA). El xat s'obre quan l'usuari ho demana.
• Gestió del focus: en obrir-lo, el focus va al panell (al títol o al camp); el panell es comporta com un diàleg no modal o modal segons el disseny (role="dialog", aria-labelledby); Esc el tanca i el focus torna al botó; mai un parany (2.1.2).
• Registre de missatges: una regió role="log" (que implica aria-live="polite") perquè cada missatge nou del bot s'anunciï sense moure el focus (4.1.3). Cada missatge identifica l'emissor («Assistent:», «Tu:») de manera textual, no només pel color o la posició (1.4.1, 1.3.3). L'indicador «escrivint…» no s'ha d'anunciar en bucle.
• Camp d'entrada: <label> (visible o aria-label), autocomplete si escau, enviament amb Retorn i amb un botó amb nom, sense límit de temps per escriure (2.2.1).
• Botons de resposta ràpida (chips): botons reals, enfocables, amb nom; si desapareixen després de triar, l'elecció queda escrita al registre.
• Contingut enriquit: targetes, carrusels, imatges i enllaços dins del xat amb la mateixa semàntica i alt que fora; els enllaços s'obren a la mateixa pestanya o n'avisen.
• Contrast, zoom i reajustament: el panell ha de funcionar al 200 % i a 320 px sense tallar el camp ni el botó d'enviar (1.4.4, 1.4.10); missatges amb contrast de 4,5:1 sobre les bombolles.
• Persistència: en navegar a una altra pàgina, la conversa no es perd o se n'avisa; si el xat és un <iframe>, porta title.

<button type="button" id="abrir-chat" aria-expanded="false" aria-controls="panel-chat">
  Obre l'assistent virtual
</button>

<section id="panel-chat" role="dialog" aria-labelledby="titulo-chat" hidden>
  <h2 id="titulo-chat">Assistent virtual de l'Ajuntament</h2>
  <button type="button" class="cerrar">Tanca l'assistent</button>

  <div role="log" aria-label="Conversa" aria-relevant="additions">
    <p><strong>Assistent:</strong> Hola. Et puc ajudar amb cites, taxes i padró.
       Escriu la teva pregunta o tria una opció.</p>
    <p><strong>Tu:</strong> vull demanar cita per al padró</p>
    <p><strong>Assistent:</strong> Pots demanar cita a
       <a href="/cita-previa/padron">Cita prèvia per al padró</a>.
       Vols que t'expliqui quins documents necessites?</p>
  </div>

  <div class="respuestas-rapidas">
    <button type="button">Sí, quins documents necessito</button>
    <button type="button">Parlar amb una persona</button>
  </div>

  <form>
    <label for="mensaje">Escriu el teu missatge</label>
    <textarea id="mensaje" rows="2"></textarea>
    <button type="submit">Envia</button>
  </form>
</section>

La conversa: disseny accessible del diàleg

• Llenguatge clar: respostes breus, una idea per missatge, sense argot; si la resposta és llarga, es divideix en passos o s'enllaça a la pàgina. Un bot que respon amb un paràgraf de 200 paraules és tan inaccessible com un formulari de 60 camps.
• Confirmació i correcció: el bot repeteix el que ha entès abans d'actuar («Vols cita per al padró a l'oficina del centre, correcte?») i permet corregir (3.3.4, 3.3.6, objectiu 4 de COGA).
• Tolerància: entén errors ortogràfics, sinònims, frases incompletes i llenguatge col·loquial; no exigeix ordres exactes.
• Sense memòria exigida: no demana recordar codis ni repetir dades ja donades (3.3.7); ofereix opcions en botons a més del text lliure.
• Temps: la sessió no caduca mentre la persona escriu a poc a poc; si hi ha inactivitat, avisa i permet continuar (2.2.1).
• Transparència: s'identifica com a assistent automàtic a l'inici (ho exigeix a més el Reglament d'IA per als sistemes que interactuen amb persones), indica què pot fer i què no, i mai no simula ser humà.
• Fallada elegant: quan no entén, ho diu i ofereix alternatives (opcions, persona, telèfon), sense bucles de «no t'he entès».
• Privadesa: no demana dades sensibles al xat si no cal; avisa de què es desa.

Assistents de veu i interfícies només de veu

Els assistents de veu (en altaveus, cotxes, apps de banca per veu, centraletes amb reconeixement) ajuden persones amb discapacitat visual o motriu i exclouen persones sordes, amb dificultats de parla (disàrtria, quequesa, afàsia) o en entorns sorollosos. Regles: sempre una alternativa no vocal equivalent (teclat, xat de text, menú per tons, persona); temps de resposta ampliable; confirmacions; vocabulari tolerant; opció de repetir i de parlar més a poc a poc; i a les centraletes, possibilitat de passar a un operador en qualsevol moment sense tornar a l'inici. A l'EN 301 549 (PDF, s'obre en una finestra nova), la comunicació bidireccional de veu té requisits propis al capítol 6 (inclosa la provisió de text en temps real, 6.2, com a alternativa).

Avaluació d'un xatbot

1. Interfície: auditoria WCAG del component (teclat, focus, noms, regió viva, zoom, contrast), amb lector de pantalla i al mòbil.
2. Conversa: proves amb un guió de tasques (demanar cita, consultar un termini, reclamar) escrites amb errors ortogràfics, llenguatge col·loquial i missatges curts; mesura dels intents, la longitud de les respostes i els camins cap a una persona.
3. Integració: existeix la mateixa informació fora del xat? La via humana és accessible (telèfon amb text o LSE, correu)? El xat és accessible des de totes les pàgines al mateix lloc?
4. Usuaris: proves amb persones amb discapacitat cognitiva, visual i auditiva; és on apareixen els problemes reals de comprensió.

Resum

• El xat és un component web: botó amb nom i estat, obertura només a petició, focus gestionat sense paranys, registre amb role="log" i emissor textual, camp etiquetat, zoom i contrast correctes, title si és un iframe.
• La conversa segueix el llenguatge clar i els patrons COGA: breu, confirmació abans d'actuar, tolerant amb els errors, sense exigir memòria, sense caducar, transparent i amb fallada elegant.
• Sempre una via humana accessible (patró COGA), amb l'ajuda en el mateix ordre relatiu a totes les pàgines (3.2.6) i la mateixa informació disponible fora del xat.
• Les interfícies només de veu necessiten una alternativa textual equivalent i pas a un operador en qualsevol moment.
• Avaluar la interfície, la conversa i la integració, i provar amb persones usuàries amb diferents discapacitats.