Zum Inhalt springen

Praxis & How-to

Barrierefreies Web-Messaging: zehn Punkte für den Start

Ein Chatfenster ist klein, aber es bündelt fast alles, was Barrierefreiheit schwierig macht. Zehn Punkte, an denen Sie anfangen können.

Ein Mann schaut abends auf sein Smartphone

Web-Messaging ist für viele Menschen der bequemste Weg zum Kundenservice. Für manche ist es der einzige, etwa für gehörlose oder schwerhörige Menschen, für die ein Anruf keine Option ist.

Umso wichtiger ist, dass das Chatfenster selbst keine Hürde aufbaut.

Dieser Beitrag übersetzt die Anforderungen der WCAG 2.1 auf Konformitätsstufe AA in zehn Punkte für Chat-Oberflächen. Er ersetzt keine Prüfung durch Fachleute, gibt Ihnen aber einen belastbaren Startpunkt.

#Welche Regeln gelten

Für viele Dienstleistungen an Verbraucherinnen und Verbraucher gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG). Erfasst sind unter anderem der elektronische Geschäftsverkehr, Bankdienstleistungen und Telekommunikationsdienste.

Öffentliche Stellen des Bundes richten sich nach der BITV 2.0, die Länder haben eigene Regelungen. In beiden Fällen ist die europäische Norm EN 301 549 der Maßstab, und die verweist für Webinhalte auf WCAG 2.1 AA.

Auch wo keine Pflicht besteht, lohnt sich der Maßstab. Ein Chat, der mit Tastatur und Screenreader funktioniert, funktioniert in aller Regel auch besser auf dem Smartphone, im Zug und mit müden Augen.

#Sehen: Kontrast, Fokus, Vergrößerung

#1. Textkontrast

Text im Chat braucht ein Kontrastverhältnis von mindestens 4,5 zum Hintergrund, große Schrift mindestens 3 (Erfolgskriterium 1.4.3). Das betrifft auch Zeitstempel, Platzhalter im Eingabefeld und den Hinweis „schreibt gerade“, die oft in hellem Grau gesetzt werden.

#2. Bedienelemente und sichtbarer Fokus

Schaltflächen, Rahmen von Eingabefeldern und Symbole brauchen mindestens 3 Kontrast (1.4.11). Wer mit der Tastatur arbeitet, muss jederzeit sehen, wo der Fokus steht (2.4.7). Ein entfernter Fokusrahmen ist einer der häufigsten Fehler.

#3. Zoom und Umbruch

Bei 320 CSS-Pixeln Breite darf kein waagrechtes Scrollen nötig sein (1.4.10). Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalte verloren gehen (1.4.4). Ein fest positioniertes Chatfenster, das bei Vergrößerung den Bildschirm verdeckt, verfehlt beides.

Auf dem Smartphone zeigt sich, ob eine Oberfläche umbricht, statt abzuschneiden. Beispiel aus dem Univerx Kanal.

#Bedienen: Tastatur, Zeit, Einblendungen

#4. Alles per Tastatur

Öffnen, schreiben, senden, Anhänge hinzufügen, schließen: Alles muss ohne Maus gehen (2.1.1). Der Fokus darf im Chatfenster nicht gefangen sein (2.1.2).

Nach dem Schließen gehört er zurück auf die Schaltfläche, die den Chat geöffnet hat. Die Reihenfolge, in der der Fokus wandert, folgt der sichtbaren Reihenfolge (2.4.3).

#5. Zeitlimits verlängerbar

Viele Chats beenden die Sitzung nach einer Zeit ohne Eingabe. Wer langsamer tippt oder eine Vorlesesoftware nutzt, braucht dann eine Warnung und die Möglichkeit, die Zeit mit einer einfachen Aktion zu verlängern (2.2.1).

#6. Einblendungen beherrschbar

Tooltips, Vorschläge und Hinweise, die bei Mauszeiger oder Fokus erscheinen, müssen sich schließen lassen, ohne den Fokus zu verschieben, und sichtbar bleiben, solange man sie braucht (1.4.13).

#Verstehen: Ansagen, Beschriftungen, Sprache

#7. Neue Nachrichten ansagen

Das ist der chat-typischste Punkt. Kommt eine Antwort, muss ein Screenreader sie ansagen, ohne dass der Fokus springt (4.1.3, Statusmeldungen). Technisch geschieht das über einen sogenannten Live-Bereich. Fehlt er, bleibt die Antwort für blinde Nutzerinnen unbemerkt.

Achten Sie auch auf die Menge. Wird jede Tipp-Anzeige angesagt, wird der Chat laut und unruhig. Angesagt werden sollte die Nachricht, nicht jedes Zwischenereignis.

#8. Alles beschriftet

Das Eingabefeld braucht eine sichtbare Beschriftung oder Anleitung (3.3.2). Schaltflächen, die nur ein Symbol zeigen, etwa die Büroklammer oder der Pfeil zum Senden, brauchen einen zugänglichen Namen (4.1.2).

#9. Klare Sprache, auch vom Bot

Kurze Sätze, eindeutige Schaltflächen, keine Abkürzungen ohne Erklärung. Das gilt für die Oberfläche und für die Antworten. Ein Bot, der mit drei Absätzen antwortet, ist für viele Menschen schwerer zu erfassen als einer, der in zwei Sätzen antwortet und nachfragt.

Gekennzeichnete KI-Antworten helfen zusätzlich. Wer weiß, dass ein Bot antwortet, formuliert anders und weiß, wann er nach einem Menschen fragen sollte. Mehr dazu im Beitrag KI kennzeichnen, ohne das Gespräch zu stören.

#Prüfen: mit Menschen, nicht nur mit Werkzeugen

#10. Testen und Alternativen anbieten

Automatische Prüfwerkzeuge finden einen Teil der Fehler, aber nicht alle. Testen Sie mit Tastatur, mit Screenreader auf Desktop und Smartphone und, wenn möglich, mit Menschen, die diese Hilfsmittel täglich nutzen.

Und bieten Sie immer einen zweiten Weg an: Übergabe an einen Menschen, Rückruf oder E-Mail. Barrierefreiheit heißt auch, dass niemand im Chat festhängt. Prüfen Sie zudem Anhänge: Ein PDF, das im Chat verschickt wird, muss ebenso zugänglich sein wie das Fenster selbst.

#Die zehn Punkte auf einen Blick

Nr.PrüfpunktWCAG 2.1Stufe
1Textkontrast 4,51.4.3AA
2Kontrast Bedienelemente, sichtbarer Fokus1.4.11, 2.4.7AA
3Umbruch bei 320 px, Zoom 200 %1.4.10, 1.4.4AA
4Tastaturbedienung, Fokusreihenfolge, keine Fokusfalle2.1.1, 2.1.2, 2.4.3A
5Zeitlimits verlängerbar2.2.1A
6Einblendungen schließbar1.4.13AA
7Neue Nachrichten angesagt4.1.3AA
8Beschriftungen und Namen3.3.2, 4.1.2A
9Klare SpracheEmpfehlung–
10Tests und AlternativenEmpfehlung–

#Wie Univerx das angeht

Für das Web-Messaging und die übrigen Kundenoberflächen gilt bei Univerx ein klares Ziel: barrierefrei nach WCAG 2.1 AA und EN 301 549. Den aktuellen Stand und die Einordnung finden Sie im Trust Center unter BFSG / European Accessibility Act.

Dasselbe Ziel gilt für den Univerx Kanal, dessen geführter Dialog oft auf dem Smartphone stattfindet. Dort zählen Umbruch, Zoom und große Bedienflächen besonders.

Den ganzen Kundenservice nimmt der Leitfaden Barrierefreiheit im Kundenservice (BFSG) in den Blick.

Sehen Sie Univerx an Ihrem eigenen Beispiel.

In einer Demo zeigen wir die Plattform entlang Ihrer Kanäle und Anliegen – vom KI-Agenten über Video und Einsatzplanung bis zur Auswertung.

Online, in Deutsch oder Englisch, ohne Vorbereitung auf Ihrer Seite.