Barrierefreie Formulare: Labels, Fehlermeldungen und Pflichtfelder richtig umsetzen

Warum Formulare der häufigste Stolperstein sind

Formulare sind interaktive Elemente die besonders hohe Barrierefreiheits-Anforderungen haben. Ein visuell beschriftetes Eingabefeld ist nicht automatisch für Screenreader zugänglich. Fehlermeldungen die nur rot blinken helfen niemandem der Farben nicht sehen kann.

Und Pflichtfelder die nur mit * markiert sind, werden von Screenreadern nicht als Pflicht erkannt.

Labels korrekt zuordnen

Jedes Eingabefeld braucht ein HTML-label mit for-Attribut das auf die id des Feldes zeigt. Platzhalter-Text (placeholder) ist KEIN Ersatz für ein Label – er verschwindet beim Tippen und wird von manchen Screenreadern ignoriert. Richtig: label(for=email) + input(id=email).

Falsch: Nur placeholder='E-Mail'.

Fehlermeldungen zugänglich machen

Fehlermeldungen müssen: Direkt beim fehlerhaften Feld stehen (nicht nur oben auf der Seite). Per aria-describedby mit dem Feld verknüpft sein. Automatisch den Fokus erhalten (oder per aria-live='polite' angesagt werden).

Den Fehler in Text beschreiben, nicht nur durch Farbe.

Pflichtfelder und Hilfetexte

Pflichtfelder mit aria-required='true' markieren (nicht nur visuell mit *). Hilfetexte (z.B. 'Mindestens 8 Zeichen') per aria-describedby mit dem Feld verknüpfen.

Gruppenfelder (z.B. Adresse) mit fieldset und legend zusammenfassen.

Formular-Validierung BFSG-konform

Clientseitige Validierung muss zugänglich sein: Fehlerhafte Felder nicht nur rot markieren sondern auch per Text beschreiben. Den Fokus zum ersten fehlerhaften Feld setzen. Eine Zusammenfassung aller Fehler oben anzeigen mit Links zu den betroffenen Feldern.

Häufig gestellte Fragen