Onko chatbotisi todella kaikkien käytettävissä?

Chatboteilla on saavutettavuusongelma

Asiakaspalveluchatboteista on tullut ensisijainen — ja usein ainoa — yhteydenottotapa monille digitaalisille tuotteille. Odotus on selvä: jos tarvitset apua, avaa chat. Jos chat ei toimi sinulle, muuta ei usein ole.

Vammaisille käyttäjille tämä tilanne on usein kestämätön. Useimmat kaupalliset chatbotit eivät täytä perussaavutettavuusvaatimuksia. Ruudunlukuohjelmien käyttäjät eivät kuule viestejä niiden saapuessa. Näppäimistön käyttäjät jäävät jumiin chat-widgetin sisälle eivätkä pääse pakenemaan. Liikuntavammaiset käyttäjät kohtaavat kosketuskohteita, jotka ovat liian pieniä luotettavaan napauttamiseen. Kognitiivisesti vammaiset käyttäjät kohtaavat tekstiseiniä eikä selkeää tapaa toipua väärinymmärretystä kyselystä.

Tällä on merkitystä sekä eettisesti että oikeudellisesti. Kesäkuusta 2025 lähtien voimassa oleva Euroopan esteettömyysdirektiivi kattaa soveltamisalaan kuuluvien yritysten digitaaliset asiakaspalvelukanavat — mukaan lukien chatbot-käyttöliittymät. ADA Yhdysvalloissa on sovellettu chatboteihin verkkosaavutettavuutta koskevissa oikeudenkäynneissä. Jos chatbot on ensisijainen palvelukanava, saavuttamaton chatbot on palvelun poissulkeminen.

Seitsemän yleisintä chatbotin saavutettavuusvirhettä

1. Puuttuvat ARIA live -alueet

Kun uusi viesti saapuu chat-ikkunaan, ruudunlukuohjelman käyttäjän täytyy kuulla se. Mutta ruudunlukuohjelmat ilmoittavat vain sisällöstä, jonka niille on kerrottu olevan tärkeää ja dynaamista. Ilman ARIA live -aluetta, joka ympäröi chat-viestisäiliötä, viestit näkyvät visuaalisesti mutta ovat täysin äänettömiä ruudunlukuohjelmien käyttäjille.

<!-- Ilman live-aluetta: uusia viestejä ei ilmoiteta -->
<div class="chat-messages">
  <!-- Viestit lisätään tähän dynaamisesti -->
</div>

<!-- Live-alueen kanssa: uudet viestit ilmoitetaan niiden saapuessa -->
<div
  class="chat-messages"
  role="log"
  aria-live="polite"
  aria-label="Chat-keskustelu"
>
  <!-- Viestit lisätään tähän dynaamisesti -->
</div>

role="log" on määritelty ARIA:ssa nimenomaan chat-keskusteluja ja viestivirtoja varten. aria-live="polite" ilmoittaa uuden sisällön käyttäjän tauon jälkeen — vähemmän häiritsevästi kuin assertive keskustelevassa kontekstissa.

2. Näppäimistöansat

Näppäimistöansa syntyy, kun käyttäjä siirtyy sarkaimella komponenttiin eikä pääse enää sarkaimella ulos — hän on jumissa. Chatbot-widgetit ovat yleisimpiä paikkoja, joissa näppäimistöansoja esiintyy.

Korjaus vaatii asianmukaisen kohdistuksen hallinnan toteuttamista: Tab ja Shift+Tab on navigoitava chatin interaktiivisten elementtien läpi, ja Escapen on suljettava chat ja palautettava kohdistus elementtiin, joka sen laukaisi. WCAG 2.1.2 Ei näppäimistöansaa (taso A) kattaa tämän vaatimuksen.

Tämän testaaminen on yksinkertaista: avaa chatbotisi käyttäen vain näppäimistöä, siirry sarkaimella kaikkien sen sisällä olevien interaktiivisten elementtien läpi ja varmista, että voit poistua käyttäen Escapea tai selkeästi näkyvää sulkupainiketta.

3. Riittämätön värikontrasti

Chatbotit renderöidään usein brändiväreissä, ja brändivärejä ei usein testata WCAG-kontrastivaatimuksia vastaan. Yleisiä virheitä:

• Chat-kuplan teksti, joka ei täytä 4,5:1 kontrastia kuplan taustaa vastaan
• Syöttökentän paikkamerkkiteksti alle kontrastikynnysten
• Aikaleimateksti hyvin vaaleanharmaana

Kontrastivaatimus koskee chatbot-käyttöliittymää samalla tavalla kuin muutakin sivustoasi — widgeteille ei ole poikkeusta.

4. Merkitsemättömät syöttökentät ja painikkeet

Chat-syöttökentällä — “Kirjoita viestisi…” — on oltava ohjelmallisesti liitetty otsikko, ei pelkkä paikkamerkkiteksti. Paikkamerkkiteksti katoaa heti, kun käyttäjä alkaa kirjoittaa, eikä se ole luotettava korvike otsikolle.

Lähetyspainikkeella, pienennyspainikkeella, sulkupainikkeella ja kaikilla muilla interaktiivisilla säätimillä on oltava saavutettavat nimet. Pelkän kuvakkeen sisältävä “lähetä”-painike ilman tekstiä ja ilman aria-label-attribuuttia ilmoitetaan ruudunlukuohjelmissa “painikkeeksi” ilman kuvausta sen tarkoituksesta.

<!-- Otsikko puuttuu: epäonnistuu -->
<input type="text" placeholder="Kirjoita viesti...">
<button><svg><!-- lähetä-kuvake --></svg></button>

<!-- Otsikon ja aria-labelin kanssa: läpäisee -->
<label for="chat-input" class="sr-only">Kirjoita viestisi</label>
<input type="text" id="chat-input" placeholder="Kirjoita viesti...">
<button aria-label="Lähetä viesti">
  <svg aria-hidden="true"><!-- lähetä-kuvake --></svg>
</button>

5. Kosketuskohteet liian pieniä liikuntavammaisille käyttäjille

WCAG 2.2 esitteli 2.5.8 Kohteen koko (vähimmäisvaatimus) tasolla AA, joka vaatii interaktiivisilta elementeiltä vähintään 24×24 CSS-pikselin kohdekokoa. Monet chatbot-käyttöliittymät sijoittavat sulje-, pienennä- ja emoji-painikkeet 16–20 pikseliin — selvästi alle tämän kynnyksen.

Käyttäjille, joilla on liikuntavamma, vapinaa tai heikentynyt hienomotoriikka, pienet kohteet ovat aidosti käyttökelvottomia. Chatbotin toimintopainikkeet ovat yleisimmin vaikutuksen kohteena olevien käyttöliittymäelementtien joukossa.

6. Ei aikakatkaisuvaroitusta tai istunnon jatkoa

Monet chatbotit päättävät passiivisen istunnon tietyn ajan jälkeen. Kun tämä tapahtuu ilman varoitusta, käyttäjät, joilla kestää kauemmin viestien laatiminen tai lukeminen — mukaan lukien monet kognitiivisesti tai liikuntavammaiset käyttäjät — voivat menettää keskustelunsa ilman mitään mahdollisuutta jatkaa istuntoa.

WCAG 2.2.1 Ajoituksen säädettävyys (taso A) vaatii, että kun aikaraja on asetettu, käyttäjät voivat poistaa sen käytöstä, jatkaa sitä tai raja on vähintään 20 tuntia. Chatbot, joka lopettaa istunnot 5 minuutin passiivisuuden jälkeen ilman varoitusta, ei ole vaatimustenmukainen.

7. Monimutkainen kieli ja virheistä toipumisen puute

Chatbotit ovat hyödyllisiä vain, jos käyttäjät voivat viestiä niiden kanssa tehokkaasti. Käyttäjille, joilla on kognitiivinen vamma, oppimisvaikeus tai heikompi lukutaito, chatbot, joka käyttää ammattikieltä, tarjoaa pitkiä tekstiseiniä ilman rakennetta tai epäonnistuu hiljaisesti, kun se ei ymmärrä kyselyä, on toiminnallisesti saavuttamaton.

Saavutettava chatbot-sisältö:

• Käyttää selkeää kieltä (lyhyet lauseet, tavalliset sanat)
• Jakaa vastaukset silmäiltäviin osiin sen sijaan, että esittäisi kappaleita
• Tarjoaa selkeän virheistä toipumisen: kun botti ei ymmärrä, se sanoo niin selvästi ja tarjoaa erityisiä vaihtoehtoja
• Tukee käyttäjiä kyselyjen uudelleenmuotoilussa sen sijaan, että vain sanoisi “En ymmärtänyt sitä”

Uudet WCAG 2.2 -kriteerit, jotka ovat erityisen olennaisia chatboteille

WCAG 2.2 lisäsi useita onnistumiskriteerejä, jotka koskevat erityisen voimakkaasti chat-käyttöliittymiä:

2.4.11 Kohdistus ei peity (vähimmäisvaatimus) — taso AA. Kun chat-widget on auki, se ei saa täysin piilottaa kohdistettua elementtiä taakseen. Monet chat-widgetit ilmestyvät sivun sisällön päälle ja peittävät kohdistetun elementin, kun käyttäjät siirtyvät sarkaimella alla olevalla sivulla.

2.4.12 Kohdistus ei peity (parannettu) — taso AAA. Kohdistetun elementin tulisi olla täysin näkyvissä.

2.5.7 Vetämisliikkeet — taso AA. Jos chat-widgettisi voidaan sijoittaa uudelleen vetämällä, on oltava olemassa yhden osoittimen vaihtoehto.

2.5.8 Kohteen koko (vähimmäisvaatimus) — taso AA, kuten edellä käsiteltiin.

Kuinka testaat chatbotisi

1. Vain näppäimistö: avaa chat käyttämättä hiirtä. Siirry sarkaimella kaikkien elementtien läpi. Varmista, että voit kirjoittaa, lähettää viestejä ja sulkea widgetin käyttäen vain näppäimistöä. Varmista, että voit poistua Escapella.

2. Ruudunlukuohjelma: avaa NVDA (Windows, ilmainen) tai VoiceOver (Mac/iOS, sisäänrakennettu) ja ole vuorovaikutuksessa chatin kanssa. Varmista, että viestit ilmoitetaan niiden saapuessa. Varmista, että syöttökentät ja painikkeet on merkitty oikein.

3. Zoomaa 200 %:iin: varmista, että chat-käyttöliittymä ei vuoda yli tai peitä sivun sisältöä, kun teksti suurennetaan.

4. Kontrastin tarkistus: käytä selainlaajennusta kuten axe DevTools tai WAVE tarkistaaksesi kontrastin chat-käyttöliittymässä.

5. Mobiili: testaa kosketuskohteiden koot ja varmista, että chat toimii iOS/Android-saavutettavuusominaisuuksien (VoiceOver, TalkBack) kanssa.

Jos integroit kolmannen osapuolen chatbotin, arvioi toimittajan saavutettavuus ennen valintaa. Pyydä heidän VPAT-asiakirjaansa (Voluntary Product Accessibility Template) ymmärtääksesi heidän ilmoittamansa vaatimustenmukaisuustason. Testaa widget itse — toimittajan väitteet eivät korvaa suoraa testausta.

Chatbotin saavutettavuuden rakentaminen alusta alkaen on huomattavasti halvempaa kuin sen jälkiasennus. Jos arvioit chatbot-alustoja, käy jokainen ehdokas läpi tämän tarkistuslistan kautta ennen sitoutumista.

Kattavaa arviota chatbotistasi ja muusta digitaalisesta asiakaspalvelukokemuksestasi varten keskustele tiimimme kanssa tai aloita julkisten sivujesi ilmaisella skannauksella.