Valóban mindenki tudja használni a chatbotját?

A chatbotoknak akadálymentességi problémájuk van

Az ügyfélszolgálati chatbotok sok digitális termék elsődleges — és gyakran egyetlen — kapcsolatfelvételi lehetőségévé váltak. Az elvárás egyértelmű: ha segítségre van szüksége, nyissa meg a chatet. Ha a chat nem működik önnek, gyakran nincs más lehetőség.

A fogyatékossággal élő felhasználók számára ez a helyzet gyakran tarthatatlan. A legtöbb kereskedelmi chatbot nem felel meg az alapvető akadálymentességi követelményeknek. A képernyőolvasót használók nem hallják az érkező üzeneteket. A billentyűzetet használók beszorulnak a chatwidgetbe, és nem tudnak kilépni. A mozgássérült felhasználók túl kicsi érintési célpontokba ütköznek, amelyeket nem lehet megbízhatóan megérinteni. A kognitív fogyatékossággal élő felhasználók szövegfalakkal szembesülnek, és nincs egyértelmű módjuk arra, hogy egy félreértett kérdésből visszatérjenek.

Ez etikai és jogi szempontból egyaránt számít. Az Európai Akadálymentesítési Irányelv (EAA), amely 2025 júniusa óta van hatályban, kiterjed a hatálya alá tartozó vállalkozások digitális ügyfélszolgálati csatornáira — amelyek magukban foglalják a chatbot-felületeket is. Az ADA az Egyesült Államokban a webes akadálymentességi perekben a chatbotokra is alkalmazásra került. Ha egy chatbot elsődleges szolgáltatási csatorna, akkor egy nem akadálymentes chatbot a szolgáltatásból való kizárást jelent.

A hét leggyakoribb chatbot-akadálymentességi hiba

1. Hiányzó ARIA live régiók

Amikor új üzenet érkezik egy chatablakban, a képernyőolvasót használónak hallania kell azt. De a képernyőolvasók csak azt a tartalmat jelentik be, amelyről közölték velük, hogy fontos és dinamikus. Egy, a chatüzenet-tárolót körbevevő ARIA live régió nélkül az üzenetek vizuálisan megjelennek, de teljesen némák a képernyőolvasót használók számára.

<!-- Live régió nélkül: az új üzeneteket nem jelenti be -->
<div class="chat-messages">
  <!-- Az üzenetek dinamikusan itt kerülnek hozzáadásra -->
</div>

<!-- Live régióval: az új üzeneteket érkezéskor bejelenti -->
<div
  class="chat-messages"
  role="log"
  aria-live="polite"
  aria-label="Csevegő beszélgetés"
>
  <!-- Az üzenetek dinamikusan itt kerülnek hozzáadásra -->
</div>

A role="log" kifejezetten a csevegő beszélgetésekhez és üzenetfolyamokhoz van definiálva az ARIA-ban. Az aria-live="polite" az új tartalmat azután jelenti be, hogy a felhasználó szünetet tart — kevésbé zavaró, mint az assertive egy beszélgetés kontextusában.

2. Billentyűzetcsapdák

Billentyűzetcsapda akkor keletkezik, amikor a felhasználó a Tab billentyűvel belép egy komponensbe, és többé nem tud onnan kilépni — beragad. A chatbot-widgetek a leggyakoribb helyek közé tartoznak, ahol billentyűzetcsapdák megjelennek.

A megoldás megfelelő fókuszkezelés megvalósítását igényli: a Tab és a Shift+Tab segítségével navigálni kell tudni a chaten belüli interaktív elemek között, és az Escape-nek be kell zárnia a chatet, és vissza kell adnia a fókuszt annak az elemnek, amely elindította. A WCAG 2.1.2 Nincs billentyűzetcsapda (A szint) fedi le ezt a követelményt.

Ennek tesztelése egyszerű: nyissa meg a chatbotját csak a billentyűzet használatával, lépjen végig a Tab billentyűvel az összes benne lévő interaktív elemen, és győződjön meg róla, hogy az Escape vagy egy jól látható bezárás gomb segítségével ki tud lépni.

3. Elégtelen színkontraszt

A chatbotokat gyakran márkaszínekben jelenítik meg, és a márkaszíneket gyakran nem tesztelik a WCAG kontrasztkövetelményeivel szemben. Gyakori hibák:

Csevegőbuborék-szöveg, amely nem éri el a 4,5:1 kontrasztot a buborék hátterével szemben
A beviteli mező helykitöltő szövege a kontrasztküszöb alatt
Nagyon világosszürke időbélyegző-szöveg

A kontrasztkövetelmény ugyanúgy vonatkozik a chatbot-felületre, mint az oldal többi részére — nincs kivétel a widgetek számára.

4. Címkézetlen beviteli mezők és gombok

A chat beviteli mezőnek — „Írja be az üzenetét…” — programozottan társított címkével kell rendelkeznie, nem csak helykitöltő szöveggel. A helykitöltő szöveg eltűnik, amint a felhasználó elkezd gépelni, és nem megbízható helyettesítője egy címkének.

A küldés gombnak, a kicsinyítés gombnak, a bezárás gombnak és minden más interaktív vezérlőnek hozzáférhető névvel kell rendelkeznie. Egy szöveg és aria-label nélküli, csak ikont tartalmazó „küldés” gombot a képernyőolvasók „gomb” néven jelentenek be, a rendeltetésének leírása nélkül.

<!-- Hiányzó címke: megbukik -->
<input type="text" placeholder="Írjon üzenetet...">
<button><svg><!-- küldés ikon --></svg></button>

<!-- Címkével és aria-label-lel: megfelel -->
<label for="chat-input" class="sr-only">Írja be az üzenetét</label>
<input type="text" id="chat-input" placeholder="Írjon üzenetet...">
<button aria-label="Üzenet küldése">
  <svg aria-hidden="true"><!-- küldés ikon --></svg>
</button>

5. A mozgássérült felhasználók számára túl kicsi érintési célpontok

A WCAG 2.2 bevezette a 2.5.8 Célpont mérete (minimum) kritériumot AA szinten, amely megköveteli, hogy az interaktív elemek minimális célpontmérete 24×24 CSS-pixel legyen. Sok chatbot-felület 16–20 pixelen helyezi el a bezárás, kicsinyítés és emoji gombokat — jóval e küszöb alatt.

A mozgássérültek, remegésben szenvedők vagy csökkent finommotorikus kontrollal rendelkező felhasználók számára a kis célpontok valóban használhatatlanok. A chatbot műveleti gombjai a leggyakrabban érintett felhasználói felületi elemek közé tartoznak.

6. Nincs időtúllépési figyelmeztetés vagy munkamenet-meghosszabbítás

Sok chatbot egy meghatározott idő után befejezi az inaktív munkamenetet. Amikor ez figyelmeztetés nélkül történik, azok a felhasználók, akiknek több időre van szükségük az üzenetek megfogalmazásához vagy elolvasásához — beleértve sok kognitív vagy mozgássérült felhasználót is — elveszíthetik a beszélgetésüket anélkül, hogy lehetőségük lenne a munkamenet meghosszabbítására.

A WCAG 2.2.1 Igazítható időzítés (A szint) megköveteli, hogy amikor időkorlátot állítanak be, a felhasználók kikapcsolhassák, meghosszabbíthassák, vagy a korlát legalább 20 óra legyen. Egy olyan chatbot, amely 5 perc inaktivitás után figyelmeztetés nélkül lezárja a munkamenetet, nem megfelelő.

7. Bonyolult nyelvezet és hibajavítási lehetőség hiánya

A chatbotok csak akkor hasznosak, ha a felhasználók hatékonyan tudnak kommunikálni velük. A kognitív fogyatékossággal, tanulási zavarral vagy alacsonyabb írástudással rendelkező felhasználók számára egy olyan chatbot, amely szakzsargont használ, struktúra nélküli hosszú szövegfalakat nyújt, vagy némán elhasal, amikor nem érti a kérdést, funkcionálisan hozzáférhetetlen.

Akadálymentes chatbot-tartalom:

Egyszerű nyelvezetet használ (rövid mondatok, gyakori szavak)
A válaszokat áttekinthető egységekre bontja ahelyett, hogy bekezdéseket mutatna
Egyértelmű hibajavítást biztosít: amikor a bot nem érti, ezt kifejezetten közli, és konkrét alternatívákat kínál
Támogatja a felhasználókat a kérdések újrafogalmazásában, ahelyett, hogy csak annyit mondana: „Ezt nem értettem”

A chatbotok szempontjából különösen releváns új WCAG 2.2 kritériumok

A WCAG 2.2 több sikerkritériumot is hozzáadott, amelyek különös erővel vonatkoznak a chatfelületekre:

2.4.11 Fókusz nem takart (minimum) — AA szint. Amikor egy chatwidget nyitva van, nem szabad teljesen elrejtenie a fókuszált elemet maga mögött. Sok chatwidget az oldal tartalma fölött jelenik meg, és eltakarja a fókuszált elemet, amikor a felhasználók a mögöttes oldalon a Tab billentyűvel navigálnak.

2.4.12 Fókusz nem takart (bővített) — AAA szint. A fókuszált elemnek teljesen láthatónak kell lennie.

2.5.7 Húzó mozdulatok — AA szint. Ha a chatwidget húzással áthelyezhető, léteznie kell egyetlen mutatóval végezhető alternatívának.

2.5.8 Célpont mérete (minimum) — AA szint, ahogyan fentebb szerepel.

Hogyan tesztelje a chatbotját

Csak billentyűzettel: nyissa meg a chatet egér használata nélkül. Lépjen végig a Tab billentyűvel az összes elemen. Ellenőrizze, hogy tud-e gépelni, üzeneteket küldeni, és bezárni a widgetet csak billentyűzettel. Győződjön meg róla, hogy az Escape billentyűvel ki tud lépni.
Képernyőolvasó: nyissa meg az NVDA-t (Windows, ingyenes) vagy a VoiceOvert (Mac/iOS, beépített), és lépjen kapcsolatba a chattel. Ellenőrizze, hogy az üzeneteket érkezéskor bejelenti-e. Ellenőrizze, hogy a beviteli mezők és gombok helyesen vannak-e címkézve.
Nagyítás 200%-ra: ellenőrizze, hogy a chatfelület nem folyik-e túl vagy takarja-e el az oldal tartalmát, amikor a szöveget felnagyítják.
Kontrasztellenőrzés: használjon egy böngészőbővítményt, például az axe DevToolst vagy a WAVE-et a chatfelület kontrasztjának ellenőrzésére.
Mobil: tesztelje az érintési célpontok méretét, és ellenőrizze, hogy a chat működik-e az iOS/Android akadálymentességi funkcióival (VoiceOver, TalkBack).

Ha harmadik féltől származó chatbotot integrál, a választás előtt értékelje a szállító akadálymentességét. Kérje el a VPAT-jukat (Voluntary Product Accessibility Template), hogy megértse az általuk állított megfelelőségi szintet. Tesztelje maga a widgetet — a szállítói állítások nem helyettesítik a közvetlen tesztelést.

A chatbot akadálymentességének a kezdettől való beépítése lényegesen olcsóbb, mint az utólagos átalakítása. Ha chatbot-platformokat értékel, futtassa végig minden jelöltet ezen az ellenőrzőlistán, mielőtt döntene.

A chatbotja és a digitális ügyfélszolgálati élménye többi részének átfogó áttekintéséhez beszéljen csapatunkkal, vagy kezdje egy ingyenes vizsgálattal a nyilvánosan elérhető oldalain.