Der Kontakt ist der letzte Schritt, an dem du einen Kunden verlieren kannst. Frühere Hürden lassen sich irgendwie umgehen: Eine Produktbeschreibung kann man zu Ende lesen, ein Bild überspringen und eine Tabelle mit Eigenschaften aus dem Text erschließen. Ein Formular, das sich nicht absenden lässt, kann niemand umgehen. Wer das gesamte Angebot gelesen hat und keine Anfrage senden kann, wird dir das nicht melden – die Person verschwindet einfach.
Warum gerade der Kontakt zum Engpass wird
Rund um die Vorschriften zur Barrierefreiheit sind zahlreiche Leitfäden zu Kontrasten, Überschriften und Alternativtexten entstanden. Sie sind alle notwendig – und lassen zugleich die Stelle aus, an der mangelnde Barrierefreiheit am meisten kostet. Inhalte lassen sich auf mehrere Arten erschließen. Eine Anfrage lässt sich nur über einen der vorgesehenen Wege senden: Formular, Chat oder Telefon. Jeder dieser Wege muss so gebaut sein, dass er ohne Maus funktioniert.
Lass dabei die Sprache der Pflichten zunächst beiseite. Barrierefreie Kontaktwege bedeuten schlicht, dass mehr Menschen dir schreiben können. Gleichzeitig berücksichtigst du vorübergehende Situationen, in denen jeder allein auf die Tastatur angewiesen sein kann: ein defektes Touchpad, die Arbeit im Zug oder ein Formular, das mit nur einer Hand ausgefüllt wird.
- ScreenreaderEine blinde Person hört die Website in der Reihenfolge, in der sie aufgebaut wurde – nicht in der Reihenfolge, in der sie aussieht.
- Nur die TastaturEingeschränkte Beweglichkeit oder zitternde Hände machen eine Maus ungenau oder unbrauchbar.
- SeitenvergrößerungBei zweifacher Vergrößerung können schwebende Elemente die Hälfte des Formulars und die Schaltfläche zum Absenden verdecken.
- Vorübergehende EinschränkungEin gebrochener Arm, grelles Sonnenlicht auf dem Bildschirm oder ein alter Laptop mit defektem Touchpad. Das kann jedem passieren.
Dieser Text ersetzt kein Audit der gesamten Website – er behandelt ausschließlich die Kontaktwege. Wenn du dein Formular gerade erst gestaltest, beginne mit der Auswahl von Feldern und Mikrotexten aus unserem Leitfaden zum Kontaktformular auf der Website und kehre anschließend für den Test hierher zurück.
Maßstab für die Barrierefreiheit von Websites sind die WCAG. Seit dem 28. Juni 2025 gelten für einen Teil der Privatunternehmen entsprechende Pflichten aus den Vorschriften zur Umsetzung des European Accessibility Act; Umfang und Ausnahmen hängen jedoch von Art und Größe des Unternehmens ab. Kläre mit einem Rechtsberater, welche Anforderungen dein Unternehmen betreffen. Dieser Beitrag beschreibt ausschließlich praktische Tests und ist keine Rechtsberatung.
Der Tastaturtest in zehn Minuten
Du benötigst weder Tools noch technische Kenntnisse. Du brauchst zehn Minuten und musst die Maus außer Reichweite legen – buchstäblich, denn der Griff zur Maus ist oft stärker als der gute Vorsatz. Durchlaufe den gesamten Weg wie ein Kunde, der eine einzige Frage hat und sie stellen möchte.
- Lege die Maus beiseite.Öffne die Startseite und bewege dich ab jetzt ausschließlich mit der Tabulatortaste, den Pfeiltasten und der Eingabetaste.
- Navigiere zum Kontakt.Zähle, wie oft du Tab drücken musst, um die Kontakt- oder Chat-Schaltfläche zu erreichen. Gerät der Fokus unterwegs in ein Menü und kommt nicht wieder heraus, hast du den ersten Fehler gefunden.
- Achte auf den Fokusring.Bei jedem Schritt musst du sehen, wo du dich befindest. Verschwindet der Fokusring auch nur bei einem Element, bewegt sich eine Person ohne Maus im Blindflug.
- Aktiviere Elemente mit der Eingabetaste.Alles, was anklickbar aussieht, muss sich mit der Eingabetaste aktivieren lassen, eine Schaltfläche zusätzlich mit der Leertaste. Funktioniert das nicht, handelt es sich meist um einen gewöhnlichen Textblock, der nur wie eine Schaltfläche aussieht.
- Prüfe, ob du wieder herauskommst.Drücke nach dem Öffnen eines Chatfensters, Pop-ups oder Menüs Escape. Das Element sollte sich schließen und der Fokus an die Ausgangsstelle zurückkehren.
- Sende die Anfrage vollständig ab.Hör nicht nach dem Öffnen des Formulars auf. Fülle es aus, löse absichtlich einen Fehler aus, korrigiere ihn und sende das Formular ab. Auch die Bestätigung des Absendens muss ohne Maus erreichbar sein.
Notiere die Stelle, an der du den Fokus verloren hast, die Stelle, die sich nicht mit Escape verlassen ließ, und das Element, das nicht aktiviert werden konnte. Diese drei Notizen reichen als Aufgabenliste für die Person, die deine Website betreut.
Prüfe außerdem die Reihenfolge. Mit Tab sollten die Elemente in derselben Reihenfolge durchlaufen werden, in der sie auf dem Bildschirm zu sehen sind. Springt der Fokus von der Kopfzeile in die Fußzeile und anschließend zurück in die Mitte des Formulars, wurde das Layout visuell verändert, ohne die Dokumentstruktur anzupassen.
Formular: Beschriftung, Fehlermeldung und Verknüpfung mit dem Feld
Bei Formularen entscheidet sich Barrierefreiheit an drei Details: Hat ein Feld eine dauerhafte, korrekt verknüpfte Beschriftung? Wird ein Fehler angesagt, statt nur rot markiert? Und lässt sich die Schaltfläche zum Absenden erreichen?
Das häufigste Scheitern sieht so aus: Eine Person mit Screenreader füllt das Formular aus, drückt die Eingabetaste und hört keine Veränderung. Optisch ist unter zwei Feldern roter Text erschienen. Das Formular ist ausgefüllt, doch die Person weiß nicht, warum es nicht abgesendet wurde, und versucht es noch zweimal, bevor sie aufgibt.
Scrolle die Tabelle seitlich, um alle Spalten zu sehen.
| Symptom | Was es für den Screenreader bedeutet | Korrektur |
|---|---|---|
| Ein Feld ist nur durch grauen Text im Inneren beschrieben | Der Hinweis verschwindet nach dem ersten Zeichen und wird bei der Rückkehr zum Feld nicht erneut vorgelesen | Eine dauerhafte Beschriftung über dem Feld, die über das for-Attribut mit ihm verknüpft ist |
| Ein Fehler wird nur durch einen roten Rahmen angezeigt | Die Information über den Fehler existiert überhaupt nicht | Fehlertext am Feld, über eine ID verknüpft, plus eine Meldung nach dem fehlgeschlagenen Absenden |
| Ein Sternchen kennzeichnet als Einziges ein Pflichtfeld | Das Zeichen wird möglicherweise als bedeutungsloses Symbol vorgelesen oder ganz übersprungen | Das Wort „Pflichtfeld“ in der Beschriftung und die required-Eigenschaft am Feld |
| Die Einwilligung ist ein Bild oder ein eigener Schalter | Ein Element ohne Rolle und ohne verständlich vermittelten Auswahlzustand | Ein gewöhnliches Kontrollkästchen mit Beschriftung, die anklickbar und mit Tab erreichbar ist |
| Die Schaltfläche zum Absenden besteht nur aus einer Grafik | Sie wird als Dateiname oder als das Wort „Schaltfläche“ ohne Inhalt vorgelesen | Sichtbarer Text auf der Schaltfläche, zum Beispiel „Anfrage senden“ |
- Ein Klick auf die Beschriftung setzt den Cursor in das Feld – das ist der einfachste Beleg dafür, dass beide miteinander verknüpft sind.
- Nach einem fehlgeschlagenen Absendeversuch springt der Fokus zum ersten fehlerhaften Feld oder zu einer Fehlerübersicht.
- Der Fehlertext sagt, was korrigiert werden muss, und nicht nur, dass etwas nicht stimmt.
- Bereits eingegebene Daten verschwinden nach einem fehlgeschlagenen Absendeversuch nicht.
- Das Formular lässt sich aus dem letzten Feld heraus mit der Eingabetaste absenden.
- Die Bestätigung des Absendens bleibt als Text auf dem Bildschirm stehen, statt nach zwei Sekunden zu verschwinden.
Meetlead bietet drei parallele Kontaktwege: Chat, Rückrufbitte und ein Offline-Formular, das einen Vorgang erstellt. Durchlaufe jeden davon ausschließlich mit der Tastatur, bevor du das Thema abhakst. Kontaktkanäle ansehen.
Beim Vorbereiten von Screenshots für Anleitungen hilft der Leitfaden: Screenshots in Anleitungen: Schritte auch ohne Bilder verständlich machen.
Chatfenster und schwebende Elemente
Chatfenster, Einwilligungsbanner und Rabatt-Pop-up haben eines gemeinsam: Sie erscheinen über dem Inhalt und beanspruchen Aufmerksamkeit. Für eine Person ohne Maus entscheidet die Qualität eines schwebenden Elements darüber, ob sie sagt: „Ich habe es in einer Sekunde geschlossen“ oder: „Ich komme hier nicht mehr heraus.“
- FokusfalleDie Tabulatortaste kreist endlos im Fenster und kehrt nicht auf die Seite zurück. Als einziger Ausweg bleibt, den Browser-Tab zu schließen.
- Kein Schließen mit EscapeEin für die Maus sichtbares, mit der Tastatur aber unerreichbares Schließsymbol beendet für manche Menschen jede Möglichkeit zur Kontaktaufnahme.
- Verdeckter InhaltBei vergrößerter Darstellung kann ein schwebendes Element ein Formularfeld oder die Telefonnummer in der Fußzeile verdecken.
- Schaltfläche ohne NamenEin einzelnes Symbol wird mitunter nur als „Schaltfläche“ oder Dateiname vorgelesen. Ein Name wie „Chat öffnen“ löst das Problem in einer Zeile.
Eine weitere Falle ist der Ablauf beim Öffnen. Bleibt der Fokus nach dem Drücken der Eingabetaste auf der Chat-Schaltfläche auf der Seite, während sich das Fenster an anderer Stelle öffnet, bemerkt eine Person mit Screenreader nicht, dass etwas geschehen ist. Das korrekte Verhalten ist einfach: Der Fokus wechselt in das Fenster, dessen Titel wird vorgelesen, Escape schließt es und der Fokus kehrt zu der Schaltfläche zurück, die es geöffnet hat.
Du solltest auch wissen, woher Unterschiede zwischen Entwurf und realer Website kommen. Das Meetlead-Widget wird in einem Shadow Root eingebunden, sodass die globalen Styles der Website sein Inneres nicht beeinflussen. Das beseitigt eine Klasse möglicher Überraschungen, ersetzt aber nicht den vollständigen Tastaturtest auf deiner Website. Wenn im Verfügbarkeitsplan einer Website keine freien Termine vorhanden sind, wird die Karte für Rückrufbitten semantisch über den Zustand disabled und das Attribut aria-disabled deaktiviert – nicht nur optisch ausgegraut.
Chat, Rückrufbitte und Offline-Formular funktionieren in einem gemeinsamen Fenster, das in einem isolierten Shadow Root eingebunden wird. Produkt ansehen.
Auf dem Smartphone konkurriert dasselbe schwebende Element zusätzlich mit der Bildschirmtastatur und der Browserleiste um Platz. Typische Überschneidungen behandeln wir im Artikel über Conversion auf Mobilgeräten.
Alternative Kontaktwege als gelebte Barrierefreiheit
Der günstigste Weg zu barrierefreiem Kontakt ist nicht das perfekte Widget, sondern ein zweiter Kanal. Wer mit dem Formular nicht zurechtkommt, sollte daneben eine Telefonnummer, eine E-Mail-Adresse und die Möglichkeit für eine Rückrufbitte finden – als gewöhnlichen Text und nicht in einer Grafik versteckt.
Eine Telefonnummer als Bild ist ein klassischer Fehler: Sie lässt sich weder markieren noch vorlesen oder anklicken. Dasselbe gilt für eine E-Mail-Adresse, die „zum Schutz vor Spam“ in Einzelteile zerlegt wurde. Du schützt dich vor Bots und schließt zugleich eine Person aus, die dir schreiben wollte.
- Erster Schritt
Eine Person mit Screenreader erreicht den Kontaktbereich und hört drei Optionen: Chat, Telefon und Rückrufbitte.
- Zweiter Schritt
Sie öffnet den Chat mit der Eingabetaste. Der Fokus wechselt in das Nachrichtenfeld und der Name des Fensters wird vorgelesen.
- Dritter Schritt
Das Tippen geht langsam. Statt ein längeres Gespräch zu führen, wählt sie die Rückrufbitte und gibt ihre Nummer in ein einziges Feld ein.
- Vierter Schritt
Sie schließt das Fenster mit Escape und kehrt genau an die vorherige Stelle auf der Seite zurück. Der Kontakt wurde ohne einen einzigen Mausklick hergestellt.
Eine Rückrufbitte ist häufig der einfachste Kanal für Menschen, denen das Schreiben schwerfällt, weil sie nur ein statt vier Felder ausfüllen müssen. Funktionsweise und Fallstricke einer solchen Lösung beschreiben wir im Artikel über den Callback auf der Website.
Ein Kontaktweg, den du mit der Tastatur von Anfang bis Ende durchlaufen hast, ist mehr wert als drei oberflächlich geprüfte. Einführung vereinbaren.
Eine Checkliste für jedes Quartal
Die Barrierefreiheit von Kontaktwegen verschlechtert sich unbemerkt – durch ein neues Banner, ein Plugin-Update oder den Austausch einer Schaltfläche gegen eine schönere. Deshalb ist dies keine einmalige Aufgabe, sondern eine kurze Prüfung in einem festen Rhythmus.
- Die Kontaktschaltfläche ist allein mit Tab erreichbar, ohne dass unterwegs Fokusfallen auftreten.
- Der Fokusring ist bei jedem Element des Kontaktwegs sichtbar.
- Die Tab-Reihenfolge entspricht der Reihenfolge der Elemente auf dem Bildschirm.
- Das Chatfenster und andere schwebende Elemente lassen sich mit Escape schließen.
- Nach dem Schließen eines Fensters kehrt der Fokus zu der Schaltfläche zurück, die es geöffnet hat.
- Jedes Formularfeld hat eine dauerhafte Beschriftung, und ein Klick darauf setzt den Cursor in das Feld.
- Fehlermeldungen enthalten Text, sind mit dem Feld verknüpft und erhalten den Fokus.
- Schaltflächen und Symbole haben Namen, die ihre Funktion beschreiben – nicht nur die Grafik.
- Telefonnummer und E-Mail-Adresse sind als Text vorhanden, der sich markieren und anklicken lässt.
- Auch bei zweifacher Seitenvergrößerung lässt sich das Formular weiterhin ausfüllen und absenden.
- Jemand hat den gesamten Weg vom Einstieg bis zur Bestätigung des Absendens ohne Maus durchlaufen.
Ein Quartal ist ein sinnvoller Rhythmus, weil diese Zeit meist für eine neue Integration oder eine geänderte Vorlage auf der Website ausreicht. Wenn du noch einen Schritt weitergehen und sehen möchtest, wie Menschen mit deinen Kontaktwegen tatsächlich zurechtkommen, ergänze einige beobachtete Sitzungen. Wie du diese durchführst, erläutern wir im Leitfaden zu Usability-Tests für Websites.
Das Ergebnis dieser Arbeit bleibt in Berichten unsichtbar, denn Anfragen, die dank funktionierender Kontaktwege eingingen, lassen sich nicht als solche zählen. Sichtbar ist jedoch die andere Seite: Jeder behobene Punkt auf der Liste steht für eine Gruppe von Menschen, die nicht mehr an der letzten Hürde scheitert.
