Wer über eine Website eine Anfrage stellt, muss jedes Formularfeld verstehen und bedienen können, auch ohne Maus. Ein Screenreader ist ein Programm, das Bildschirminhalte vorliest oder auf einer Braillezeile ausgibt. Ein barrierefreies Formular fragt nur nötige Angaben ab, zeigt bei jedem Feld dauerhaft eine Beschriftung und erklärt, wie Sie Fehler korrigieren.
Nur nötige Angaben abfragen
Beschränken Sie das Formular auf Angaben, die Sie für die Antwort brauchen. Für viele einfache Anfragen reichen Name, E-Mail-Adresse und Nachricht. Eine Telefonnummer sollte freiwillig bleiben, wenn Sie sie für die Bearbeitung nicht benötigen.
Ordnen Sie die Felder in einer logischen Reihenfolge an. Zeigen Sie jede Beschriftung direkt neben oder über dem zugehörigen Feld. Gehören Auswahlmöglichkeiten zusammen, etwa mehrere Kontaktwege, fassen Sie sie mit einer gemeinsamen Überschrift zu einer Gruppe zusammen. In HTML verwenden Sie dafür die Elemente fieldset und legend. Beschriften Sie außerdem jede Auswahl einzeln.
Felder klar beschriften
Jedes Eingabefeld braucht eine sichtbare Beschriftung, die erklärt, welche Angabe Sie erwarten. „E-Mail-Adresse“ ist konkreter als „Kontakt“. Verknüpfen Sie die Beschriftung technisch mit dem Feld, damit auch ein Screenreader sie dem richtigen Feld zuordnet.
Ein Platzhaltertext im Feld ersetzt die Beschriftung nicht. Beim Tippen verschwindet er, sodass nicht mehr zu erkennen ist, welche Angabe in das Feld gehört. Formatbeispiele und zusätzliche Erklärungen gehören neben oder unter das Feld. Wenn ein Datum in einem besonderen Format eingegeben werden muss, zeigen Sie den Hinweis direkt beim Datumsfeld an.
Pflichtfelder eindeutig markieren
Erklären Sie vor der Eingabe, welche Angaben verpflichtend und welche freiwillig sind. Verwenden Sie dafür zum Beispiel die Wörter „Pflichtfeld“ und „freiwillig“. Sie können auch ein Sternchen nutzen, wenn Sie dessen Bedeutung erklären. Kennzeichnen Sie Pflichtfelder nicht nur durch Farbe.
Kennzeichnen Sie Pflichtfelder auch technisch, zum Beispiel mit dem HTML-Attribut required. So kann die Information zusätzlich von assistiven Technologien erfasst werden. Legen Sie ein Feld nur dann als Pflichtfeld fest, wenn Sie die Angabe tatsächlich für die Bearbeitung brauchen.
Fehler verständlich erklären
Eine Fehlermeldung muss das betroffene Feld nennen und erklären, was Sie korrigieren sollen. „Ungültige Eingabe“ hilft wenig. Verständlicher ist: „Geben Sie eine gültige E-Mail-Adresse ein.“ Zeigen Sie den Hinweis direkt am Feld an und verknüpfen Sie ihn technisch damit. So können auch Menschen mit Screenreader den Hinweis dem richtigen Feld zuordnen.
Bei mehreren Fehlern hilft eine zusätzliche Übersicht am Anfang des Formulars. Jeder Eintrag sollte zum betroffenen Feld führen. Löschen Sie bereits gültige Eingaben auch dann nicht, wenn jemand das Formular korrigiert, und kennzeichnen Sie Fehler neben einem roten Rahmen mit einem verständlichen Text.
Zeigen Sie nach dem Absenden eine eindeutige Bestätigung an, die auch für assistive Technologien erkennbar ist. Die Bestätigung darf erst erscheinen, wenn die Nachricht tatsächlich versendet wurde. So bleibt klar, ob die Anfrage angekommen ist.
Kontaktformular per Tastatur prüfen
Alle Felder, Auswahlmöglichkeiten, Links und Schaltflächen müssen sich ohne Maus erreichen und bedienen lassen. Mit der Tabulatortaste gelangen Sie zum nächsten Element, mit Umschalt+Tab zum vorherigen. Die sichtbare Markierung zeigt, welches Element Sie gerade ansteuern, und muss gut erkennbar bleiben. Die Tastatur darf in keinem Element stecken bleiben.
Prüfen Sie das fertige Formular nur mit der Tastatur. Gehen Sie alle Felder durch und wählen Sie Optionen aus. Korrigieren Sie anschließend eine Eingabe und senden Sie die Nachricht ab. Achten Sie darauf, dass die Reihenfolge logisch ist und Sie jede Funktion erreichen. Die Funktion im Browser allein belegt nicht, dass das Formular mit allen Hilfsmitteln gut bedienbar ist.