Dostępność chatbotów w e-commerce, czyli kiedy Twój bot mówi wszystkim „cześć”, ale nie wszyscy mogą mu odpowiedzieć

Czy Twój bot naprawdę rozmawia ze wszystkimi?

Chatboty na stronach e-commerce stały się tak powszechne, że trudno dziś znaleźć sklep online bez migającej ikonki w prawym dolnym rogu ekranu. Brzmi jak idealny win-win, prawda?

No… prawie. Bo co jeśli część klientów nie może w ogóle rozpocząć rozmowy? Albo co gorsza – zaczyna, ale szybko gubi się w interfejsie?

Przyjrzyjmy się dostępności chatbotów od strony bardzo praktycznej. Dziś bierzemy na tapet kilka najczęstszych problemów, na jakie natrafiamy podczas audytów.

Bariera na wejściu, czyli gdy wiesz, że on tam jest, ale nie możesz skorzystać

Chatbot na stronie jest, działa, świeci, macha do użytkownika i grzecznie zachęca do rozmowy. Z perspektywy większości osób wszystko wygląda poprawnie: klik, okno się otwiera, można pisać.

Jednak dla części użytkowników ta cała obietnica natychmiastowej pomocy kończy się na poziomie: „widzę dymek, ale nie mogę nic zrobić”.

Mówimy tutaj o sytuacjach, w których bariera pojawia się jeszcze przed rozpoczęciem rozmowy. Użytkownik nie jest w stanie:

• otworzyć okna czatu,
• zlokalizować przycisku,
• dostać się do czatu klawiaturą,
• w ogóle nie jest informowany o istnieniu czatu.

Wtedy chatbot staje się jak zamknięte drzwi bez klamki: niby wejście jest, ale spróbuj je znaleźć.

Jak zrobić to dobrze?

• Nadaj przyciskowi otwierającemu czat odpowiednią rolę semantyczną. Najlepiej użyć elementu <button> lub poprawnie przypisać role="button".
• Zadbaj o dostępność przycisku z klawiatury.
• Przemyśl miejsce przycisku w kolejności tabulacji.
• Zadbaj o odpowiedni kontrast i widoczny fokus.

Nawigowanie po konwersacji: fokus i rozmiar celu

Załóżmy, że użytkownikowi udało się już otworzyć okno czatu. Sukces? Tylko częściowy. Bardzo często dopiero tutaj zaczyna się prawdziwy problem.

Z perspektywy użytkownika korzystającego z klawiatury lub czytnika ekranu czat to nowy mikroświat, który powinien rządzić się jasnymi zasadami.

W praktyce bywa jednak tak, że po otwarciu okna fokus zostaje gdzieś w tle strony, a użytkownik musi zgadywać, czy czat w ogóle się otworzył.

Do tego dochodzi kwestia rozmiaru i rozmieszczenia elementów interaktywnych. Małe przyciski „X”, ciasno upakowane ikony czy przyciski reagujące tylko na precyzyjne kliknięcie są barierą nie tylko dla osób z niepełnosprawnościami ruchowymi, ale też dla użytkowników mobilnych i osób starszych.

Jak zrobić to dobrze?

• Po otwarciu czatu ustaw fokus na logiczny, kluczowy element, np. nagłówek okna czatu lub pole wpisywania wiadomości.
• Po zamknięciu czatu zawsze przywracaj fokus do elementu, który go otworzył.
• Zapewnij spójną kolejność tabulacji: nagłówek, historia rozmowy, pole wpisu, przyciski akcji.
• Zadbaj o odpowiedni rozmiar celów interaktywnych: minimum 24 × 24 px, a najlepiej więcej.
• Unikaj elementów dostępnych wyłącznie przez hover lub gesty myszy.

Co jest czym: nazywanie elementów, etykiety i alternatywy dla informacji wizualnych

Dla projektanta interfejsu wiele rzeczy jest oczywistych: ikona strzałki oznacza wysyłanie wiadomości, dymek to historia czatu, trzy kropki sygnalizują, że bot pisze.

Problem w tym, że oczywistość wizualna nie zawsze przekłada się na czytelność dla technologii asystujących.

Czytnik ekranu nie widzi ikon. Widzi tylko to, co zostało poprawnie nazwane i opisane. Jeśli przycisk wysyłania wiadomości nie ma etykiety, użytkownik usłyszy co najwyżej „przycisk” albo ciszę.

W audytach bardzo często spotykamy chatboty, które wizualnie wyglądają nowocześnie, ale semantycznie są kompletnie anonimowe. A anonimowy interfejs to interfejs, któremu nie da się zaufać.

Jak zrobić to dobrze?

• Dodaj jednoznaczne etykiety do wszystkich przycisków w formie ikony, np. „Wyślij wiadomość” lub „Zamknij czat”.
• Jeżeli czat działa w osobnym oknie, dialogu modalnym lub iframe, zapewnij mu jednoznaczną nazwę, np. przez title, aria-label lub aria-labelledby.
• Opisuj ikony i elementy funkcyjne tekstem alternatywnym.
• Nie przekazuj kluczowych informacji wyłącznie kolorem, animacją lub ikoną.

„Napisałam wiadomość i co teraz?” O notyfikacjach i statusach

Wyobraź sobie, że wysyłasz wiadomość do bota i zapada cisza. Nie wiesz, czy wiadomość została wysłana, czy bot ją przetwarza, czy może coś się zepsuło.

Dla użytkownika widzącego często ratuje sytuację subtelna animacja, zmiana koloru lub trzy kropki sugerujące, że bot odpowiada. Dla użytkownika niewidomego, bez odpowiednich komunikatów, to po prostu brak informacji.

Użytkownik musi wiedzieć:

• czy jego wiadomość została wysłana,
• czy odpowiedź jest w trakcie generowania,
• czy pojawił się błąd,
• czy rozmowa została zakończona lub przerwana.

Jak zrobić to dobrze?

• Informuj użytkownika o wysłaniu wiadomości w sposób dostępny, np. przez komunikaty w aria-live.
• Sygnalizuj status „bot pisze” również tekstowo, nie tylko animacją.
• Informuj o błędach w sposób jednoznaczny i zrozumiały.
• Zadbaj o to, aby nowe wiadomości były anonsowane czytnikom ekranu w odpowiednim momencie.
• Unikaj automatycznego przesuwania fokusu bez wyraźnego powodu.

Dostępny chatbot naprawdę rozmawia ze wszystkimi

Dostępny chatbot to nie tylko taki, który odpowiada szybko. To taki, który komunikuje się jasno, przewidywalnie i na równych zasadach ze wszystkimi użytkownikami.

Choć wiele z opisanych problemów wygląda jak drobne detale, w praktyce decydują one o tym, czy pomoc rzeczywiście jest dostępna, czy tylko dobrze wygląda na makiecie.