Barrierefreie Formulare: Labels, Fehler, Autocomplete

Formulare entscheiden über Kontakt, Buchung und Kauf. Sind sie nicht barrierefrei, brechen Nutzer ab, und im Shop kostet das direkt Umsatz. Dieser Beitrag zeigt die wichtigsten Punkte nach WCAG 2.1 AA.

Beschriftungen (Labels) richtig setzen

Jedes Eingabefeld braucht ein sichtbares, dauerhaft vorhandenes Label, das programmatisch mit dem Feld verbunden ist, per <label for="…"> oder indem das Feld im Label steckt. Ein Platzhalter (grauer Text im Feld) ersetzt kein Label: Er verschwindet bei der Eingabe und hat oft zu wenig Kontrast. Reine Icon-Felder (z. B. Lupe für Suche) brauchen ein aria-label.

Fehlermeldungen verständlich und zugänglich

Fehler müssen in Textform benannt werden (nicht nur rote Umrandung), konkret sagen, was zu tun ist, und dem betroffenen Feld zugeordnet sein (z. B. per aria-describedby). Wichtig für Screenreader: Der Fehler sollte angekündigt werden, etwa über eine Live-Region, damit er nicht unbemerkt bleibt.

Autocomplete für persönliche Daten

Felder für persönliche Daten sollen ihren Zweck maschinenlesbar angeben (SC 1.3.5), z. B. autocomplete="email", "name", "tel", "postal-code". Das hilft allen beim schnelleren Ausfüllen und besonders Menschen mit kognitiven Einschränkungen.

Tastaturbedienung und Fokus

Das komplette Formular muss allein mit der Tastatur ausfüllbar und absendbar sein, in logischer Reihenfolge, mit sichtbarem Fokusrahmen. Selbstgebaute Elemente (Dropdowns, Datepicker, Custom-Checkboxen) sind hier die häufigste Falle, native HTML-Elemente sind fast immer die sicherere Wahl.

Prüfen

Der kostenlose BFSG-Check testet unter anderem fehlende Formular-Labels und Autocomplete. Vollständige Übersicht: WCAG 2.1 AA Checkliste.

Dieser Beitrag dient der allgemeinen Information und ist keine Rechtsberatung. Für eine verbindliche Einschätzung deiner konkreten Situation wende dich an einen Rechtsanwalt.