Fehlerbehandlung: Formular-Fehler barrierefrei kommunizieren

Schlechte Fehlerbehandlung ist einer der häufigsten Conversion-Killer und BFSG-Verstöße zugleich. Ein sehbehinderter Nutzer kann einen rot gefärbten Rahmen nicht sehen – wenn die Meldung nicht zusätzlich textlich kommt, weiß er nicht, warum sein Formular nicht ankommt.

Die 5 Säulen barrierefreier Fehlerbehandlung

1. Fehler erkennbar machen: Text-Meldung plus visueller Indikator.
2. Felder markieren: aria-invalid="true" am fehlerhaften Feld.
3. Verknüpfung herstellen: aria-describedby="error-email" verweist auf Fehlertext.
4. Fokus setzen: nach Submit-Versuch zum ersten fehlerhaften Feld.
5. Zusammenfassung: oben im Formular Liste aller Fehler mit Ankerlinks.

Code-Beispiel

<label for="email">E-Mail *</label>
<input id="email" type="email"
  aria-invalid="true"
  aria-describedby="email-error">
<div id="email-error" role="alert">
  E-Mail-Format ungültig. Beispiel: name@firma.de
</div>

Live-Regions für dynamische Meldungen

role="alert": sofortige, dringende Meldung (Screenreader unterbricht). Für kritische Fehler.
aria-live="polite": nicht-dringende Meldung (Screenreader wartet auf Sprechpause). Für Status-Updates.
Nicht mit beiden gleichzeitig überlasten – sonst ignorieren Nutzer die Meldungen.

Verständliche Fehlertexte

Falsch: "Ungültige Eingabe."
Richtig: "E-Mail-Format ungültig. Bitte verwende das Format name@firma.de"
Falsch: "Passwort entspricht nicht den Anforderungen."
Richtig: "Passwort muss mindestens 8 Zeichen lang sein und eine Zahl enthalten."

WCAG-Kriterien

3.3.1 Error Identification (Level A): Fehler werden erkannt und textlich beschrieben.
3.3.3 Error Suggestion (Level AA): Korrekturvorschlag wird gegeben.
3.3.4 Error Prevention (Level AA): für rechtsverbindliche / finanzielle Eingaben: Überprüfung vor Abschluss.