BFSG: Kontaktformular barrierefrei machen (Labels, Fehlertexte, Fokus)

Wenn es eine Stelle gibt, an der Barrierefreiheit sofort spürbar wird, dann ist es das Kontaktformular. Denn hier entscheidet sich, ob ein Nutzer sein Anliegen abschicken kann – oder ob er frustriert aufgibt.

Und im Kontext BFSG (ab 28. Juni 2025) sind Kontaktformulare kein „kleines UX-Detail“, sondern ein potenzieller Angriffs- und Beschwerdepunkt.

Warum ausgerechnet das Kontaktformular so kritisch ist

Kontaktformulare bündeln typische Barrieren:

Pflichtfelder ohne klare Kennzeichnung
Fehlermeldungen ohne Bezug zum Feld
Fokus nicht sichtbar (Tastaturnutzer „sehen“ nicht, wo sie sind)
Platzhaltertexte statt echter Beschriftung
Captchas ohne zugängliche Alternative

Die gute Nachricht: Viele Probleme sind mit überschaubarem Aufwand lösbar.

1) Labels: „Placeholder ist kein Label“

Problem: Viele Formulare haben nur einen Placeholder („Ihre E-Mail“) und kein echtes Label. Für Screenreader ist das oft unbrauchbar – und für Menschen mit kognitiven Einschränkungen verschwindet der Placeholder, sobald man tippt.

Best Practice:

Jedes Feld bekommt ein sichtbares Label.
Technisch korrekt verknüpft (<label for="..."> ↔ id="...").

Mini-Check: Klicke in ein Feld und tippe ein paar Zeichen. Bleibt klar erkennbar, was das Feld bedeutet?

2) Fehlermeldungen: Konkreter als „Ungültige Eingabe“

Problem: Fehlermeldungen wie „Bitte prüfen“ helfen niemandem. Noch schlimmer: die Meldung steht irgendwo oben, ohne dass klar ist, welches Feld betroffen ist.

Best Practice:

Fehlermeldung direkt am Feld.
Klarer Text: was ist falsch und wie wird es richtig.
Programmatisch verknüpfen (z. B. aria-describedby auf die Fehlermeldung).

Gute Beispiele:

„Bitte geben Sie eine E-Mail-Adresse im Format name@domain.de ein.“
„Dieses Feld ist erforderlich.“

3) Fokus sichtbar machen (Tastaturbedienung)

Problem: Wenn der Fokusrahmen nicht sichtbar ist, ist Tastaturbedienung praktisch unmöglich.

Best Practice:

Sichtbarer Fokuszustand für alle interaktiven Elemente (Inputs, Buttons, Checkboxen, Dropdowns).
Kontrastreich und nicht nur ein „schwacher Schatten“.

Mini-Check: Lege die Maus weg und drücke Tab. Siehst du jederzeit eindeutig, wo du gerade bist?

4) Reihenfolge: Tab-Reihenfolge muss logisch sein

Problem: Visuell ist das Formular links-rechts aufgebaut – aber Tab springt wild.

Best Practice:

DOM-Reihenfolge entspricht der visuellen Reihenfolge.
Keine „Fokusfallen“ (du musst immer weiter und wieder zurück können).

5) Captcha & Spamschutz ohne Barriere

Problem: Viele Captchas sind für Screenreader oder Tastatur schwer bis unmöglich.

Alternativen:

Honeypot-Feld + serverseitige Validierung
Rate-Limiting
E-Mail-Verifizierung
barrierefreie Captcha-Varianten (falls notwendig)

15-Minuten Quick-Test (sehr zuverlässig)

Seite laden
Maus weg
Tab / Shift+Tab / Enter / Esc
Formular absichtlich falsch abschicken
Prüfen: Kannst du jeden Fehler ohne Rätselraten beheben?

Wenn du dabei hängen bleibst, ist das der Fix, der als erstes auf die Liste muss.

Nächster Schritt

Wenn du willst, kannst du deine Website mit unserem Check einmal auf die typischen BFSG-/WCAG-Basics scannen lassen (und danach gezielt die größten Hebel fixen):

BFSG Check starten