Drei Stellen, an denen Online-Formulare an Barrierefreiheit scheitern
Online-Formulare sind eine der häufigsten Stellen, an denen Websites an Barrierefreiheit scheitern. Drei Muster begegnen mir bei fast jeder Site, die zur Prüfung kommt. Sie sind alle mit überschaubarem Aufwand korrigierbar.
Erstes Muster: Felder ohne Label
Das Eingabefeld hat einen placeholder, aber kein echtes <label>. Visuell wirkt das aufgeräumt, weil der Hinweistext im leeren Feld steht. Sobald der Nutzer aber tippt, verschwindet der Hinweis. Wer sich verirrt, hat keinen Anker mehr.
Für Screenreader ist es noch deutlicher: Ein placeholder wird oft nicht oder inkonsistent vorgelesen. Das Feld bleibt namenlos. Das ist nicht nur unfreundlich, es ist faktisch eine Sackgasse für blinde Nutzer.
Die Lösung: Jedes Feld bekommt ein <label>, sichtbar oder visuell versteckt, aber im DOM vorhanden und über for mit dem Feld verbunden.
Zweites Muster: Fehler nur in rot
Das Formular wird abgeschickt, ein Feld ist falsch ausgefüllt, der Rahmen wird rot. Sonst nichts. Wer rot nicht von grün unterscheiden kann (etwa 8 Prozent aller Männer), sieht keinen Hinweis. Wer einen Screenreader nutzt, bekommt gar nichts.
Die Lösung: Fehler bekommen einen Text, der dem Feld semantisch zugeordnet ist (über aria-describedby). Eine Farbe ist Verstärkung, nicht der einzige Hinweis. Idealerweise gibt es zusätzlich ein Icon oder ein Symbol, sodass auch ohne Farb-Wahrnehmung sofort klar ist: hier hakt etwas.
Drittes Muster: Captcha ohne Alternative
Bilder-Captchas, die “wähle alle Ampeln” verlangen, sind für Sehbehinderte oft nicht lösbar. Audio-Alternativen sind manchmal vorhanden, oft nicht. Die nutzerseitige Eskalation ist dann das Telefon, also ein Bruch im Prozess.
Es gibt heute bessere Optionen. Cloudflare Turnstile, hCaptcha mit Audio-Fallback, oder unsichtbare Anti-Bot-Mechanismen, die ohne aktive Lösung auskommen. Wer ein klassisches Bilder-Captcha einsetzt, verschenkt Conversions an die Stelle, an der ein behinderter Nutzer sonst sein Anliegen abschicken könnte.
Was diese drei Fehler gemeinsam haben
Sie entstehen nicht durch Bösartigkeit, sondern durch Standardvorlagen. Der Bootstrap-Snippet, das WordPress-Plugin, der Default einer Form-Library. Wer Formulare baut, ohne sie auf diese drei Punkte zu prüfen, übernimmt sie unbewusst.
Fazit
Barrierefreie Formulare sind kein Sonderprojekt, sie sind Handwerk. Drei Stellen prüfen, dann ist die Site für deutlich mehr Menschen nutzbar. Wer Sparring bei der Prüfung sucht, kann mich gerne ansprechen.