So machst du Fehlermeldungen im Formular barrierefrei

Formulare sind der Ort, an dem Barrierefreiheit über Umsatz entscheidet: Wer den Fehler nicht findet, bestellt nicht. Und genau hier scheitern die meisten Umsetzungen, weil die Fehlermeldung nur für Augen existiert.

Was hier schiefgeht

<form>
  <label for="mail">E-Mail</label>
  <input id="mail" name="mail" class="input-error">
  <!-- Fehler nur farblich und optisch, nicht programmatisch:
       - keine Verbindung zum Feld
       - keine Rolle, also keine Ansage
       - "ungueltig" sagt nicht, was erwartet wird -->
  <span class="error-text">Ungueltig</span>

  <button type="submit">Weiter</button>
</form>

• Die Meldung ist nicht mit dem Feld verbunden: Wer per Tastatur ins Feld springt, hört nichts davon.
• „Ungültig“ sagt nicht, was erwartet wird (3.3.3 verlangt einen Hinweis, wenn er bekannt ist).
• Die Meldung erscheint stumm: ohne Live-Semantik oder Fokuswechsel bemerkt sie niemand, der nicht hinsieht (4.1.3).

Die Lösung am einzelnen Feld

<form novalidate>
  <label for="mail">E-Mail</label>
  <input
    id="mail"
    name="mail"
    type="email"
    autocomplete="email"
    aria-invalid="true"
    aria-describedby="mail-error"
  >
  <!-- Mit dem Feld verbunden (aria-describedby), als Text identifiziert
       und mit einem konkreten Hinweis, wie es richtig geht -->
  <p id="mail-error" class="error-text">
    E-Mail-Adresse fehlt das @-Zeichen. Beispiel: name@firma.de
  </p>

  <button type="submit">Weiter</button>
</form>

Mehrere Fehler auf einmal

<!-- Bei mehreren Fehlern: eine Zusammenfassung oben, fokussiert nach
     dem Absenden. Jeder Eintrag springt zum betroffenen Feld. -->
<div role="alert" tabindex="-1" id="error-summary">
  <h2>2 Angaben fehlen</h2>
  <ul>
    <li><a href="#mail">E-Mail-Adresse fehlt das @-Zeichen</a></li>
    <li><a href="#plz">Postleitzahl braucht 5 Ziffern</a></li>
  </ul>
</div>

<script>
  // Nach dem Absenden: Fokus in die Zusammenfassung, damit die Ansage
  // ankommt und die Tastatur direkt am Fehler steht.
  document.getElementById("error-summary").focus();
</script>

Nach dem Absenden eines langen Formulars ist die Zusammenfassung der verlässlichste Weg: Sie sagt die Zahl der Fehler, benennt jeden einzeln und bringt den Fokus mit einem Klick an die richtige Stelle. Das hilft nicht nur Screenreader-Nutzenden, sondern allen.

Häufige Zusatzfehler

• Placeholder als Beschriftung: verschwindet beim Tippen und ist kein Label (nutze ein echtes label-Element).
• Fehlerfarbe ohne zweites Merkmal: Rot allein verletzt 1.4.1 (Nutzung von Farbe).
• Meldungen, die beim Tippen sofort verschwinden und wiederkommen: Das erzeugt eine Ansage pro Tastendruck. Validiere beim Verlassen des Feldes oder beim Absenden.
• Ein aria-live-Container, der erst mit dem Text zusammen ins DOM kommt: Dann ist oft nichts zu hören. Der Container muss vorher da sein und nur gefüllt werden.

Testen

1. Formular leer absenden und nur mit der Tastatur zum ersten Fehler navigieren.
2. Mit einem Screenreader prüfen: Wird der Fehler angesagt? Wird er beim Fokussieren des Feldes wiederholt?
3. Auf 200 Prozent zoomen: Bleibt die Meldung neben ihrem Feld sichtbar?