development
Ist Ihr Chatbot wirklich für alle nutzbar?
Chatbots sind heute ein zentraler Kundenservice-Kanal — doch die meisten sind nicht barrierefrei. Hier sind die häufigsten Fehler, warum sie wichtig sind und was barrierefreie Chatbots erfordern.
Chatbots haben ein Barrierefreiheitsproblem
Kundenservice-Chatbots sind für viele digitale Produkte zur primären — und oft einzigen — Kontaktmöglichkeit geworden. Die Erwartung ist klar: Wenn Sie Hilfe brauchen, öffnen Sie den Chat. Funktioniert der Chat nicht für Sie, gibt es oft nichts anderes.
Für Nutzende mit Behinderung ist diese Situation häufig untragbar. Die meisten kommerziellen Chatbots erfüllen grundlegende Anforderungen der Barrierefreiheit nicht. Screenreader-Nutzende können eintreffende Nachrichten nicht hören. Tastaturnutzende werden im Chat-Widget gefangen und kommen nicht mehr heraus. Nutzende mit motorischen Behinderungen stoßen auf Touch-Ziele, die zu klein sind, um sie zuverlässig zu treffen. Nutzende mit kognitiven Behinderungen sehen sich Textwänden gegenüber und haben keinen klaren Weg, sich von einer missverstandenen Anfrage zu erholen.
Das ist sowohl ethisch als auch rechtlich von Bedeutung. Der European Accessibility Act, seit Juni 2025 in Kraft, erfasst die digitalen Kundenservice-Kanäle der betroffenen Unternehmen — und dazu gehören Chatbot-Schnittstellen. Der ADA in den Vereinigten Staaten wurde in Rechtsstreitigkeiten zur Web-Barrierefreiheit auf Chatbots angewendet. Wenn ein Chatbot ein primärer Servicekanal ist, dann ist ein nicht barrierefreier Chatbot ein Ausschluss vom Service.
Die sieben häufigsten Barrierefreiheitsfehler bei Chatbots
1. Fehlende ARIA-Live-Regionen
Wenn eine neue Nachricht in einem Chatfenster eintrifft, muss eine Screenreader-Nutzerin sie hören. Doch Screenreader kündigen nur Inhalte an, von denen ihnen mitgeteilt wurde, dass sie wichtig und dynamisch sind. Ohne eine ARIA-Live-Region, die den Container der Chatnachrichten umschließt, erscheinen Nachrichten visuell, sind für Screenreader-Nutzende aber vollständig stumm.
<!-- Ohne Live-Region: neue Nachrichten werden nicht angekündigt -->
<div class="chat-messages">
<!-- Nachrichten werden hier dynamisch hinzugefügt -->
</div>
<!-- Mit Live-Region: neue Nachrichten werden beim Eintreffen angekündigt -->
<div
class="chat-messages"
role="log"
aria-live="polite"
aria-label="Chat-Konversation"
>
<!-- Nachrichten werden hier dynamisch hinzugefügt -->
</div>
role="log" ist in ARIA speziell für Chat-Konversationen und Nachrichtenströme definiert. aria-live="polite" kündigt neue Inhalte an, nachdem die nutzende Person pausiert — weniger störend als assertive in einem Gesprächskontext.
2. Tastaturfallen
Eine Tastaturfalle entsteht, wenn eine nutzende Person mit der Tabulatortaste in eine Komponente gelangt und nicht mehr heraustabben kann — sie steckt fest. Chatbot-Widgets gehören zu den häufigsten Orten, an denen Tastaturfallen auftreten.
Die Lösung erfordert ein korrektes Fokusmanagement: Tab und Umschalt+Tab müssen durch die interaktiven Elemente innerhalb des Chats navigieren, und die Escape-Taste muss den Chat schließen und den Fokus auf das Element zurückführen, das ihn ausgelöst hat. WCAG 2.1.2 Keine Tastaturfalle (Stufe A) deckt diese Anforderung ab.
Der Test dafür ist einfach: Öffnen Sie Ihren Chatbot nur mit der Tastatur, tabben Sie durch alle interaktiven Elemente darin und bestätigen Sie, dass Sie ihn mit Escape oder einer deutlich sichtbaren Schließen-Schaltfläche verlassen können.
3. Unzureichender Farbkontrast
Chatbots werden häufig in Markenfarben dargestellt, und Markenfarben werden oft nicht gegen die WCAG-Kontrastanforderungen getestet. Häufige Fehler:
- Text in Chat-Sprechblasen, der den Kontrast von 4,5:1 gegenüber dem Sprechblasen-Hintergrund nicht erreicht
- Platzhaltertext in Eingabefeldern unterhalb der Kontrastschwellen
- Zeitstempeltext in sehr hellem Grau
Die Kontrastanforderung gilt für die Chatbot-Schnittstelle genauso wie für den Rest Ihrer Website — es gibt keine Ausnahme für Widgets.
4. Nicht beschriftete Eingabefelder und Schaltflächen
Das Chat-Eingabefeld — „Nachricht eingeben …” — muss über eine programmatisch zugeordnete Beschriftung verfügen, nicht nur über Platzhaltertext. Platzhaltertext verschwindet, sobald die nutzende Person zu tippen beginnt, und ist kein zuverlässiger Ersatz für eine Beschriftung.
Die Senden-Schaltfläche, die Minimieren-Schaltfläche, die Schließen-Schaltfläche und alle anderen interaktiven Bedienelemente müssen zugängliche Namen haben. Eine reine Symbol-Schaltfläche zum „Senden” ohne Text und ohne aria-label wird von Screenreadern als „Schaltfläche” angekündigt, ohne jede Beschreibung ihres Zwecks.
<!-- Fehlende Beschriftung: durchgefallen -->
<input type="text" placeholder="Nachricht eingeben …">
<button><svg><!-- Senden-Symbol --></svg></button>
<!-- Mit Beschriftung und aria-label: bestanden -->
<label for="chat-input" class="sr-only">Nachricht eingeben</label>
<input type="text" id="chat-input" placeholder="Nachricht eingeben …">
<button aria-label="Nachricht senden">
<svg aria-hidden="true"><!-- Senden-Symbol --></svg>
</button>
5. Touch-Ziele zu klein für Menschen mit motorischen Einschränkungen
WCAG 2.2 führte 2.5.8 Zielgröße (Minimum) auf Stufe AA ein, wonach interaktive Elemente eine Mindestzielgröße von 24×24 CSS-Pixeln haben müssen. Viele Chatbot-Oberflächen platzieren Schließen-, Minimieren- und Emoji-Schaltflächen bei 16–20 Pixeln — deutlich unterhalb dieser Schwelle.
Für Nutzende mit motorischen Behinderungen, Tremor oder verminderter feinmotorischer Kontrolle sind kleine Ziele schlicht unbenutzbar. Die Aktions-Schaltflächen des Chatbots gehören zu den am häufigsten betroffenen UI-Elementen.
6. Keine Warnung vor Zeitüberschreitung und keine Sitzungsverlängerung
Viele Chatbots beenden eine inaktive Sitzung nach einem festgelegten Zeitraum. Geschieht das ohne Vorwarnung, können Nutzende, die länger zum Verfassen oder Lesen von Nachrichten brauchen — darunter viele Nutzende mit kognitiven oder motorischen Behinderungen — ihre Konversation verlieren, ohne jede Möglichkeit, die Sitzung zu verlängern.
WCAG 2.2.1 Zeiteinteilung anpassbar (Stufe A) verlangt, dass Nutzende ein festgelegtes Zeitlimit ausschalten, verlängern können oder dass das Limit mindestens 20 Stunden beträgt. Ein Chatbot, der Sitzungen nach 5 Minuten Inaktivität ohne Warnung beendet, ist nicht konform.
7. Komplexe Sprache und keine Fehlerbehebung
Chatbots sind nur dann nützlich, wenn Nutzende effektiv mit ihnen kommunizieren können. Für Nutzende mit kognitiven Behinderungen, Lernbehinderungen oder geringerer Lesekompetenz ist ein Chatbot, der Fachjargon verwendet, lange Textwände ohne Struktur liefert oder stillschweigend versagt, wenn er eine Anfrage nicht versteht, faktisch nicht nutzbar.
Barrierefreie Chatbot-Inhalte:
- Verwenden einfache Sprache (kurze Sätze, gebräuchliche Wörter)
- Zerlegen Antworten in überschaubare Einheiten, statt Absätze zu präsentieren
- Bieten eine klare Fehlerbehebung: Wenn der Bot etwas nicht versteht, sagt er es ausdrücklich und bietet konkrete Alternativen an
- Unterstützen Nutzende dabei, Anfragen neu zu formulieren, statt nur „Das habe ich nicht verstanden” zu sagen
Neue WCAG-2.2-Kriterien, die für Chatbots besonders relevant sind
WCAG 2.2 fügte mehrere Erfolgskriterien hinzu, die mit besonderer Wucht auf Chat-Schnittstellen zutreffen:
2.4.11 Fokus nicht verdeckt (Minimum) — Stufe AA. Wenn ein Chat-Widget geöffnet ist, darf es das fokussierte Element nicht vollständig hinter sich verbergen. Viele Chat-Widgets erscheinen über dem Seiteninhalt und verdecken das fokussierte Element, wenn Nutzende durch die darunterliegende Seite tabben.
2.4.12 Fokus nicht verdeckt (Erweitert) — Stufe AAA. Das fokussierte Element sollte vollständig sichtbar sein.
2.5.7 Ziehbewegungen — Stufe AA. Wenn sich Ihr Chat-Widget durch Ziehen neu positionieren lässt, muss eine Alternative mit einem einzelnen Zeiger existieren.
2.5.8 Zielgröße (Minimum) — Stufe AA, wie oben behandelt.
So testen Sie Ihren Chatbot
-
Nur Tastatur: Öffnen Sie den Chat ohne Maus. Tabben Sie durch alle Elemente. Prüfen Sie, ob Sie tippen, Nachrichten senden und das Widget nur mit der Tastatur schließen können. Bestätigen Sie, dass Sie mit Escape verlassen können.
-
Screenreader: Öffnen Sie NVDA (Windows, kostenlos) oder VoiceOver (Mac/iOS, integriert) und interagieren Sie mit dem Chat. Prüfen Sie, ob Nachrichten beim Eintreffen angekündigt werden. Prüfen Sie, ob Eingabefelder und Schaltflächen korrekt beschriftet sind.
-
Zoom auf 200 %: Prüfen Sie, ob die Chat-Schnittstelle bei vergrößertem Text nicht überläuft oder Seiteninhalte verdeckt.
-
Kontrastprüfung: Verwenden Sie eine Browsererweiterung wie axe DevTools oder WAVE, um den Kontrast in der Chat-Oberfläche zu prüfen.
-
Mobil: Testen Sie die Größe der Touch-Ziele und prüfen Sie, ob der Chat mit den Barrierefreiheitsfunktionen von iOS/Android (VoiceOver, TalkBack) funktioniert.
Wenn Sie einen Chatbot eines Drittanbieters integrieren, bewerten Sie die Barrierefreiheit des Anbieters vor der Auswahl. Fragen Sie nach dessen VPAT (Voluntary Product Accessibility Template), um die angegebene Konformitätsstufe zu verstehen. Testen Sie das Widget selbst — Herstellerangaben ersetzen keine eigene Prüfung.
Chatbot-Barrierefreiheit von Anfang an einzubauen ist deutlich günstiger, als sie nachzurüsten. Wenn Sie Chatbot-Plattformen evaluieren, prüfen Sie jeden Kandidaten anhand dieser Checkliste, bevor Sie sich festlegen.
Für eine umfassende Überprüfung Ihres Chatbots und des übrigen digitalen Kundenservice-Erlebnisses sprechen Sie mit unserem Team oder beginnen Sie mit einem kostenlosen Scan Ihrer öffentlich zugänglichen Seiten.
Testen Sie Ihren Chatbot und die gesamte Website auf Barrieren