Ein Formular sieht harmlos aus: ein paar Felder, ein Knopf. Mit der Maus ist es in Sekunden ausgefüllt. Wer aber per Tastatur navigiert oder einen Screenreader nutzt, steht oft vor stummen Boxen, die niemand benennt.
Genau hier scheitern barrierearme Webseiten am häufigsten. Vier überschaubare Merkmale heben ein Formular von „technisch da" zu „für alle bedienbar". Den rechtlichen Rahmen liefert das BFSG, hier geht es um die Praxis und darum, woran Du ein gutes Formular erkennst.
Warum Formulare die größte Hürde sind
Ein Text wird gelesen, ein Formular wird bedient. Der Besucher muss verstehen, was in welches Feld gehört, ob er etwas vergessen hat und was nach dem Klick passiert. Jeder dieser Schritte kann scheitern.
Für sehende Maus-Nutzer gleicht das Auge vieles aus. Eine Beschriftung steht eben „neben" dem Feld, das Sternchen signalisiert Pflicht, ein roter Rahmen meldet den Fehler. Eine Vorlese-Software hört davon nur, was im Hintergrund sauber verknüpft ist. Was bloß optisch zusammengehört, bleibt für sie unsichtbar.
Du musst dafür nicht selbst Hand anlegen. Es reicht, die vier Merkmale zu kennen und sie an Deinem eigenen Formular zu prüfen oder Deiner Agentur als Anforderung mitzugeben. Wer die Grundbegriffe rund ums Kontaktformular noch sucht, findet sie in diesem Beitrag.
Sichtbare Beschriftung statt Platzhalter
Das wichtigste Merkmal überhaupt: Jedes Eingabefeld hat eine eigene, dauerhaft sichtbare Beschriftung direkt am Feld. „Name", „E-Mail-Adresse", „Deine Nachricht" stehen über oder neben der Box und bleiben stehen, auch während man tippt.
Der häufigste Fehler ist das Gegenteil: Die Beschriftung sitzt als blasser Text im Feld selbst und verschwindet beim ersten Buchstaben. Wer mittendrin abgelenkt wird, weiß dann nicht mehr, was hier hingehört. Solche Platzhalter haben außerdem oft zu wenig Kontrast und werden von manchen Vorlese-Programmen gar nicht angesagt.
Eine echte Beschriftung bringt einen zweiten Vorteil mit, den jeder spürt: Ein Klick auf das Wort setzt den Cursor direkt ins Feld. Die anklickbare Fläche wird größer, das Treffen am Smartphone leichter. Daran erkennst Du im Schnelltest ein sauber gebautes Formular, klick einmal auf die Beschriftung und schau, ob der Cursor ins richtige Feld springt.
Pflichtfelder und Hilfetexte klar ansagen
Ein Sternchen am Feld bedeutet „Pflicht", fürs Auge. Damit auch jemand ohne Blick auf den Bildschirm es bemerkt, muss die Pflicht hörbar angesagt werden, nicht nur eingefärbt. Ein gutes Formular meldet jedes Pflichtfeld von selbst, nicht erst nach dem Fehlversuch.
Setze den Hinweis „Pflichtfelder sind mit * gekennzeichnet" an den Anfang des Formulars, nicht ans Ende. Wer ihn erst nach dem Ausfüllen liest, hat die Felder schon übersprungen.
Hilfetexte gehören dorthin, wo man sie braucht: direkt am Feld, bevor getippt wird. Eine Zeile wie „Mindestens acht Zeichen" unter dem Passwortfeld erspart das Raten und den Frust einer Fehlermeldung. Der Nutzer erfährt die Bedingung vorher und füllt das Feld auf Anhieb korrekt aus. Wie so ein Hinweis verständlich klingt, zeigt der Beitrag zur Frage, wie man im Web verständlich schreibt.
Fehlermeldungen, die helfen statt nur rot zu leuchten
Ein roter Rahmen ums Feld ist für blinde Nutzer wertlos und für rot-grün-blinde schwer zu deuten. Farbe darf eine Meldung verstärken, niemals allein tragen. Jeder Fehler braucht zusätzlich klaren Text. Wer einen Fehler in Ruhe korrigieren soll, braucht dafür auch genug Zeit; wie Du enge Zeitlimits und Sitzungs-Timeouts entschärfst, liest Du im eigenen Beitrag.
Dieser Text gehört nah ans betroffene Feld und sagt konkret, was zu tun ist. „Bitte gib eine gültige E-Mail-Adresse mit @ ein" hilft. Das blanke „Ungültige Eingabe" lässt den Nutzer raten, was er falsch gemacht hat.
Formuliere die Meldung in einfacher Sprache und als freundliche Aufforderung, nicht als Vorwurf. Wie eine Echtzeit-Validierung schon beim Tippen barrierefrei zurückmeldet, ohne den Nutzer zu überfordern, zeigt der eigene Beitrag. Und sie sollte sofort hörbar werden, sobald sie erscheint, statt stumm im Layout aufzutauchen. So bemerkt der Nutzer den Fehler von selbst, ohne das Feld erneut anspringen zu müssen. Ob Dein Formular das leistet, prüfst Du mit einem absichtlich falschen Eintrag: Bekommst Du eine verständliche Ansage statt nur einer roten Umrandung, ist dieses Merkmal erfüllt.
Bedienbar mit der Tastatur allein
Scheitert das Absenden, darf der Nutzer nicht im Leeren stehen. Ein gutes Formular springt von selbst zur ersten fehlerhaften Eingabe, liest dort Beschriftung und Fehlertext vor und macht den Weg zur Korrektur eindeutig. Der Nutzer landet genau dort, wo er handeln muss.
Wichtig ist außerdem, dass jederzeit sichtbar bleibt, welches Feld gerade aktiv ist. Viele Designs blenden diese Markierung aus, „weil sie stört". Für Tastatur-Nutzer ist sie die einzige Orientierung und gehört deutlich sichtbar, nicht weggeräumt. Über mehrere Schritte hinweg wird das besonders heikel: Wie Du eine barrierefreie Terminbuchung ohne Hürden aufbaust, liest Du im eigenen Beitrag.
Den besten Test machst Du selbst, ganz ohne Werkzeug: Lege die Maus zur Seite und füll das Formular nur mit der Tabulator-Taste aus. Kommst Du so von Feld zu Feld, über den Senden-Knopf bis zur Bestätigung, ist die wichtigste Hürde genommen. Eine saubere Überschriften-Hierarchie rund ums Formular hilft dabei, direkt zum Formular zu springen, statt sich Feld für Feld vorzuarbeiten.
Fazit
Barrierefreie Formulare entstehen nicht durch ein Spezial-Tool. Sie fügen sich in die Grundlagen der Barrierefreiheit ein und zeigen vier sichtbare Merkmale: eine dauerhafte Beschriftung an jedem Feld, hörbar angesagte Pflichten und Hilfen, sprechende Fehlermeldungen und volle Bedienbarkeit mit der Tastatur.
Nimm Dir heute Dein Kontaktformular vor und prüfe nur den ersten Punkt, ob jedes Feld eine eigene, sichtbare Beschriftung trägt. Schon dieser eine Blick zeigt Dir, ob Dein Formular für viele Menschen überhaupt bedienbar ist. Achte beim Spam-Schutz zusätzlich darauf, dass ein Captcha niemanden aussperrt.