WCAG 3.3.1: Fehlererkennung

Wird ein Eingabefehler automatisch erkannt, muss das fehlerhafte Element identifiziert und der Fehler in Textform beschrieben werden. Ein roter Rahmen allein sagt weder wo noch was – schon gar nicht jedem. (Englisch: Error Identification.)

Was verlangt das Kriterium?

Drei Bausteine machen eine konforme Fehlermeldung:

1. Welches Feld ist betroffen? (Feldname nennen, Meldung am Feld platzieren.)
2. Was ist falsch? („Die PLZ muss aus fünf Ziffern bestehen“ – nicht „Ungültige Eingabe“.)
3. In Text – Farbe und Icon dürfen dazu (1.4.1!), ersetzen den Text aber nicht.

Damit die Meldung auch ankommt, gehört sie programmatisch verknüpft (aria-describedby + aria-invalid) und bei dynamischer Prüfung angesagt.

Wen betrifft es besonders?

Screenreader-Nutzer (unverknüpfte Meldungen existieren für sie nicht), Menschen mit Farbsinnstörungen (rot allein ist unsichtbar), Vergrößerungs-Nutzer (Meldung außerhalb des Ausschnitts) und Menschen mit kognitiven Einschränkungen, die aus „Fehler!“ nichts ableiten können.

Richtig & falsch im Code

<!-- Falsch: nur rote Umrandung per Klasse -->
<input id="plz" class="error" />

<!-- Richtig: identifiziert, beschrieben, verknüpft -->
<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" inputmode="numeric"
       aria-invalid="true" aria-describedby="plz-error" />
<p id="plz-error" class="field-error">
  <strong>Fehler:</strong> Die Postleitzahl muss aus genau fünf Ziffern
  bestehen, z. B. 50667.
</p>

Bewährt als Ergänzung: eine Fehler-Zusammenfassung am Formularanfang mit Sprunglinks zu den Feldern, die nach dem Submit den Fokus erhält. Das komplette Muster steht unter Fehlermeldungen barrierefrei.

So testest du es

1. Formular bewusst falsch absenden: Wird jeder Fehler am Feld in verständlichem Text benannt?
2. Screenreader-Probe (NVDA): Wird die Meldung beim Fokussieren des Feldes mit angesagt (Verknüpfung!)? Erfährt man ohne Suchen, dass es Fehler gab?
3. Graustufen-Blick: Funktioniert die Fehleranzeige ohne Farbe?

Verwandte Themen

• Fehlermeldungen barrierefrei – das Umsetzungs-Muster
• 3.3.3 Fehlervorschlag – die nächste Stufe: Korrektur anbieten
• Validierung & Pflichtfelder