Kontaktformular barrierefrei nach BFSG: Checkliste für mehr Anfragen

Viele Webseiten verlieren wertvolle Leads nicht beim Traffic, sondern im Formular. Wenn Pflichtfelder, Fehlermeldungen oder CAPTCHA nicht barrierefrei funktionieren, brechen Nutzer den Kontaktversuch ab. Genau das wird unter dem BFSG schnell teuer: verlorene Anfragen, schlechte Nutzererfahrung und unnötiges Abmahnrisiko.

Warum Kontaktformulare Umsatz-relevant sind

Kontaktformulare liegen nah am Abschluss: Angebotsanfrage, Terminwunsch, Supportfall oder Rückrufbitte. Wenn an dieser Stelle ein Formularfeld nicht beschriftet ist oder eine Fehlermeldung nur rot aufleuchtet, ist der Lead schnell verloren. Für Agenturen, Praxen, Handwerker und Shops ist das kein Designproblem, sondern ein Conversion-Problem.

BFSG und WCAG 2.1 AA verlangen dabei keine Magie, sondern saubere Grundlagen: semantische Formularfelder, programmatisch verknüpfte Labels, verständliche Hinweise und robuste Fehlerrückmeldungen.

Die häufigsten Fehler in Lead-Formularen

• Placeholder statt Label: Sobald der Nutzer tippt, verschwindet der Hinweis.
• Pflichtfelder nur mit Farbe markiert: Farbfehlsichtige Nutzer sehen die Information nicht zuverlässig.
• Fehlertexte ohne Feldbezug: Nutzer wissen nicht, was genau korrigiert werden muss.
• CAPTCHA ohne Alternative: Bilderrätsel oder Rechenaufgaben blockieren reale Anfragen.
• Mobil zu kleine Klickziele: Checkboxen und Buttons sind zu eng oder zu klein.

Praxis-Checkliste für BFSG-konforme Kontaktformulare

1. Jedes Feld braucht ein sichtbares Label

Beispiele: Name, E-Mail, Telefon, Ihre Nachricht. Das Label muss mit dem Feld verbunden sein, nicht nur darüber stehen.

2. Pflichtfelder klar kennzeichnen

Nutzen Sie sichtbare Hinweise wie * Pflichtfeld und verknüpfen Sie diese Information technisch mit dem Feld. Nur ein roter Rahmen reicht nicht aus.

3. Fehler direkt am Feld beschreiben

Statt „Es ist ein Fehler aufgetreten“ besser: „Bitte geben Sie eine gültige E-Mail-Adresse ein.“ Verbinden Sie den Fehlertext mit dem betroffenen Feld, damit Screenreader ihn vorlesen.

4. Fokus nach Absenden sinnvoll steuern

Wenn das Formular Fehler enthält, muss der Nutzer direkt zum ersten Problem gelangen. Sonst sucht er im Blindflug durch die ganze Seite.

5. CAPTCHA nur mit barrierefreier Alternative

Versteckte Spam-Schutzmethoden wie Honeypots oder serverseitige Heuristiken sind oft besser als visuelle Rätsel. Falls ein CAPTCHA unvermeidbar ist, braucht es eine zugängliche Alternative.

Ein solides HTML-Grundmuster

<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email" required aria-describedby="email-hint email-error">
<p id="email-hint">Wir melden uns innerhalb von 24 Stunden.</p>
<p id="email-error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>

WCAG-Kriterien, die besonders oft reißen

• 1.3.1 Info and Relationships: Labels und Zusammenhänge fehlen.
• 3.3.1 Error Identification: Fehler werden nicht eindeutig benannt.
• 3.3.2 Labels or Instructions: Eingabe-Hinweise sind unklar oder unsichtbar.
• 2.1.1 Keyboard: Checkboxen, Uploads oder Datepicker sind nicht sauber per Tastatur nutzbar.

Was Sie heute prüfen sollten

1. Formular nur mit Tastatur ausfüllen.
2. Fehler absichtlich provozieren: leere Pflichtfelder, falsche E-Mail, zu kurze Nachricht.
3. Bei 200 Prozent Zoom testen, ob alles lesbar und bedienbar bleibt.
4. Den Kontaktpfad mit dem Scanner und anschließendem manuellen Formular-Test prüfen.