Barrierefreier Chatbot und Live-Chat nach WCAG 2.2 AA

Warum Chat-Widgets so oft unbrauchbar sind

Ein Chat-Widget ist ein kleines Stück Software, das oben auf Ihrer Website landet. Genau dort geht es oft schief: Das Fenster ist ein namenloser Block im Code, neue Antworten werden nicht an den Screenreader gemeldet, das Eingabefeld hat nur einen grauen Hinweis statt einer Beschriftung und die Schaltflächen sind zu hell. Wer keine Maus nutzt, kommt nicht hinein oder nicht wieder heraus.

Das ist kein theoretisches Problem. In der niederländischen Digimonitor-Untersuchung kommunaler Chatbots erfüllte 2026 kein einziger der geprüften Chatbots die Anforderungen. Die häufigsten Fehler: Schaltflächen ohne Namen, fehlende Tastaturbedienung und ein Chatstatus, der nie beim Screenreader ankommt.

Der Unterschied in der Praxis

Ein nicht barrierefreier Chat

Der Screenreader meldet nur 'Schaltfläche'. Die Antwort erscheint, ohne dass jemand sie hört. Mit Tab landen Sie in einem unsichtbaren Fenster und Escape tut nichts. Grauer Text verschwindet im Hintergrund.

Ein barrierefreier Chat

Die Schaltfläche heißt 'Chat öffnen, 2 ungelesene Nachrichten'. Jede fertige Antwort wird einmal mit dem Namen des Absenders angesagt. Escape schließt und der Fokus kehrt zurück. Aller Text erreicht den nötigen Kontrast.

Was WillieChat standardmäßig leistet

Vollständig per Tastatur

Jede Schaltfläche, jeder Link, Emoji und Anhang ist per Tab erreichbar, mit deutlich sichtbarem Fokusrahmen. Escape schließt Menü, Emoji-Auswahl oder das ganze Fenster und setzt den Fokus zurück.

Screenreader bekommen alles mit

Das Fenster ist ein echter Dialog mit Namen. Neue Antworten, der Hinweis dass der Assistent schreibt, Wartestatus und Fehlermeldungen gehen über eigene Live-Regionen an den Screenreader, ohne den Text buchstabenweise zu wiederholen.

Kontrast, der mitgeht

Wählen Sie eine helle Markenfarbe, schaltet das Widget selbst auf dunklen Text und einen dunkleren Akzent für Links und Fokusrahmen. Das Verwaltungspanel warnt, wenn eine Farbe zu wenig Kontrast bietet.

Beschriftungen und echte Fehlermeldungen

Jedes Eingabefeld hat eine Beschriftung, auch wenn sie visuell verborgen ist. Geht etwas schief, erhalten Sie Text mit einem Vorschlag statt nur eines roten Rahmens, und Ihre Nachricht bleibt erhalten.

Sprache pro Nachricht

Das Widget setzt den richtigen Sprachcode auf das Fenster und auf einzelne Nachrichten. Ein Screenreader spricht eine englische Antwort auf einer deutschen Seite dann auch wirklich englisch aus.

Keine ungefragten Überraschungen

Der Chat nimmt nie von selbst den Fokus, respektiert die Systemeinstellung für weniger Bewegung, und Besucher können den Benachrichtigungston selbst abschalten.

Checkliste: Ist Ihr aktueller Chat barrierefrei?

Können Sie den Chat ohne Maus öffnen und schließen?

Hört ein Screenreader die Antwort, sobald sie fertig ist?

Hat das Eingabefeld eine echte Beschriftung?

Ist der Fokusrahmen überall sichtbar?

Bleibt das geschlossene Fenster außerhalb der Tabreihenfolge?

Funktioniert der Chat noch bei 200 Prozent Zoom?

So schalten Sie es ein

Setzen Sie das Widget mit einer Zeile Code auf Ihre Website. Die Barrierefreiheitsfunktionen sind sofort aktiv; Sie müssen nichts konfigurieren.

Wählen Sie Ihre Markenfarbe im Verwaltungspanel. Sie sehen direkt, ob der Kontrast reicht, und das Widget passt die Textfarbe selbst an.

Möchten Sie auch Vorlesen anbieten, aktivieren Sie die Vorlesefunktion unter Einstellungen, Reiter Allgemein, Block Barrierefreiheit.

Häufig gestellte Fragen

Fällt ein eingekauftes Chat-Widget unter meine eigene Pflicht?

Ja. Die Ausnahme für Inhalte Dritter gilt nur für Inhalte, die Sie nicht bezahlen, nicht entwickeln und über die Sie keine Kontrolle haben. Ein bezahltes Chat-Widget auf Ihrer eigenen Domain erfüllt keine dieser drei Bedingungen und zählt daher mit.

Ist WillieChat zertifiziert?

Nein, und dieses Wort vermeiden wir bewusst: Für Barrierefreiheit gibt es kein Zertifikat. Das Widget ist nach WCAG 2.2 AA gebaut und wir testen selbst mit Tastatur und Screenreader. Eine unabhängige Prüfung nach der WCAG-EM-Methode ist geplant; den Bericht teilen wir, sobald er vorliegt.

Funktioniert der Chat mit NVDA, JAWS und VoiceOver?

Ja. Das Widget nutzt Standard-HTML und ARIA, genau die Grundlage dieser Hilfsmittel. Der Inhalt liegt in einer offenen Shadow Root, sodass auch Prüfwerkzeuge wie axe und Lighthouse darauf zugreifen können.

Was bietet der Chat Menschen, denen Lesen schwerfällt?

Dafür gibt es die optionale Vorlesefunktion: Unter jeder Antwort erscheint dann eine Schaltfläche Vorlesen, und Besucher können Antworten auch automatisch vorlesen lassen. Das ist eine Ergänzung, kein Ersatz für Screenreader-Unterstützung.

Verlangsamt das meine Website?

Nein. Das Widget lädt getrennt von Ihrer Seite und wiegt rund hundert Kilobyte. Barrierefreiheit steckt in der Struktur des Codes, nicht in zusätzlichen Dateien oder externen Diensten.

Barrierefreier Chatbot