Zurück zu allen Artikeln
Informio-Blog

Ein KI-Chat soll allen helfen: praktischer Barrierefreiheits-Check für Websites

Ein Chatbot kann die richtige Antwort kennen, während manche Besucher sie nicht erreichen. Prüfen Sie Tastatur, Fokus, Screenreader, Kontrast und mobile Ansicht mit dieser Checkliste.

Informio··8 Min. Lesezeit
Besucherin bedient einen KI-Chat im Kundenservice mit der Tastatur

Eine Person besucht die Website einer Gemeinde und sucht nach Öffnungszeiten. Der KI-Assistent kennt die Antwort. Lässt sich der Chat aber nicht per Tastatur öffnen, verschwindet nach dem Öffnen der Fokus oder meldet der Screenreader die neue Antwort nicht, ist diese Information praktisch unerreichbar. Dieselbe Hürde kann einen Onlineshop einen Kauf kosten.

Barrierefreiheit ist keine dekorative Ergänzung. Sie entscheidet darüber, ob ein Dienst nutzbar ist. Die WCAG 2.2 des W3C behandeln Tastaturbedienung, sichtbaren Fokus, Kontrast, schmale Ansichten und Statusmeldungen. Eine Funktionsliste beweist jedoch keine Konformität: Das konkrete Widget muss auf der konkreten Website geprüft werden.

Ein guter Test beginnt nicht nur mit „Ist die Antwort richtig?“, sondern mit „Kann jeder Besucher sie erreichen, lesen und danach weitermachen?“

1. Führen Sie ein Gespräch ohne Maus

Legen Sie die Maus weg und beginnen Sie am Seitenanfang. Finden Sie mit Tab den Chat-Launcher, öffnen Sie ihn mit Enter oder Leertaste, stellen Sie eine Frage, senden Sie sie ab und schließen Sie den Chat. Wo bleibt der Fokus? Er muss sichtbar sein und in sinnvoller Reihenfolge wandern. Ein nichtmodales Panel muss die Rückkehr zur übrigen Seite ermöglichen. Ein tatsächlich modales Fenster muss den Fokus als Dialog verwalten und beim Schließen zum Auslöser zurückführen.

Testen Sie auch Escape, Shift+Tab, lange Antworten, Fehler und die Übergabe an einen Menschen. Ein häufiger Fehler ist ein sichtbares Panel, während der Tastaturfokus auf einem verdeckten Element bleibt.

2. Bedienelemente brauchen verständliche Namen

Sprechblasen-Symbol, Senden-Pfeil und Schließen-Kreuz benötigen aussagekräftige zugängliche Namen. Das Nachrichtenfeld braucht eine eindeutige Beschriftung; ein Platzhalter allein genügt nicht. In jeder Sprache sollten die Namen natürlich und passend sein. Ein Screenreader soll etwa „Chat öffnen“, „Nachricht schreiben“ und „Senden“ ansagen, nicht nur „Schaltfläche“.

3. Neue Antworten dürfen weder stumm noch aufdringlich sein

Eine KI-Antwort erscheint erst nach dem Absenden. Screenreader-Nutzende müssen erfahren, dass sich etwas geändert hat. W3C erklärt Statusmeldungen und Live-Regionen; normale Antworten eignen sich häufig für eine nicht unterbrechende Meldung. Das bedeutet nicht, jedes Zeichen eines gestreamten Textes vorzulesen. Prüfen Sie, dass die fertige Antwort einmal in sinnvoller Reihenfolge angekündigt wird und Fehlermeldungen einen nächsten Schritt nennen.

4. Kontrast, Vergrößerung und Mobilansicht gemeinsam prüfen

Testen Sie helle und dunkle Designs, Text auf Nachrichtenblasen, sichtbaren Fokus und Bedienelemente, die nicht allein durch Farbe unterscheidbar sind. Vergrößern Sie Text und Browseransicht und testen Sie eine schmale mobile Breite. Eingabefeld, Schließen-Taste und Ende einer langen Antwort müssen nutzbar bleiben. Animationen sollten reduzierte Bewegung respektieren. WCAG 2.2 bietet messbare Kriterien; ein guter optischer Eindruck reicht nicht.

5. Sprache und Inhalt gehören dazu

Ein technisch bedienbarer Chat hilft wenig, wenn die Antworten voller unklarer Fachbegriffe sind. Verwenden Sie kurze Absätze, aussagekräftige Links und einen konkreten nächsten Schritt. Eine Gemeinde kann zum passenden Formular und Kontakt führen; ein Shop sollte die Versandseite verlinken statt „hier klicken“. Prüfen Sie auch die für Hilfstechnologien erkennbare Seitensprache und vollständige Übersetzungen.

Ein kleiner Testplan für kleine Teams

  1. Drei Aufgaben: Information finden, Rückfrage stellen und einen Menschen anfordern.
  2. Drei Eingaben: Maus, nur Tastatur und Screenreader mit Tastatur.
  3. Drei Ansichten: Desktop, schmales Mobilgerät und vergrößerter Text.
  4. Zwei Sonderfälle: langsame Antwort und Serverfehler.

Dokumentieren Sie konkrete Barrieren statt nur die Punktzahl eines automatischen Tests. Ein Scanner erkennt manche technischen Fehler, ersetzt aber kein echtes Gespräch mit Hilfstechnologie. Wiederholen Sie die Szenarien nach Korrekturen.

Der Ansatz mit Informio

Informio bindet den Assistenten als eigenständiges Widget mit lokalisierter Oberfläche ein. Prüfen Sie beim Einsatz den gesamten Ablauf auf Ihrer Website: Öffnen, Frage, Antwort, Schließen und Rückkehr zur Seite. Quality Lab kann Fragen und erwartete Antworten speichern; die Bedienbarkeit erfordert zusätzlich manuelle Tests im Browser und mit Screenreader.

Beginnen Sie mit einem kleinen Pilotprojekt und verschiedenen Eingabemethoden. So finden Sie Hürden vor Ihren Besuchern. Kontaktieren Sie Informio, um reale Fragen Ihrer Website zu testen.

Quellen

Möchten Sie Informio mit Ihren eigenen Inhalten testen?

Gerne bereiten wir eine Demo mit Ihren Daten vor und erklären Ihnen, wie Sie sichere Antworten für Ihren konkreten Anwendungsfall konfigurieren.

Demo mit Ihren eigenen Daten buchen

Verwandeln Sie Ihr Know-how in einen Assistenten, der rund um die Uhr antwortet.

Starten Sie ohne Zahlungskarte oder API-Schlüssel. Die standardmäßige Informio AI ist automatisch einsatzbereit, während Ihr eigenes OpenAI-Konto oder Ihr eigener AI-Server optional bleibt.

KOSTENLOSER Plan · 100 Antworten · keine Zahlungskarte