Ein Kriterium der Stufe A: Wird ein Eingabefehler automatisch erkannt, muss das fehlerhafte Element benannt und der Fehler dem Nutzer in Textform beschrieben werden – nicht allein über Farbe.

Genügt ein roter Rahmen?

Nein – Farbe allein verstößt gegen 3.3.1. Der Fehler muss als Text vermittelt werden, der benennt, welches Feld betroffen ist und worin das Problem besteht.

Wie hängt 3.3.1 mit 3.3.3 zusammen?

3.3.1 verlangt, den Fehler zu benennen und zu beschreiben; 3.3.3 (Fehlervorschlag) verlangt zusätzlich einen Korrekturvorschlag, sofern dieser bekannt ist.

Erfolgskriterien

WCAG 3.3.1 Fehleridentifikation

Erfolgskriterium 3.3.1 verlangt, dass bei automatischer Erkennung eines Eingabefehlers das fehlerhafte Element identifiziert und der Fehler dem Nutzer in Textform beschrieben wird. Es ist ein Kriterium der Stufe A unter Richtlinie 3.3 (Eingabehilfen).

Die zwei erforderlichen Elemente

Identifikation – der Nutzer muss wissen, welches Feld das Problem hat, nicht nur, dass irgendwo auf einem langen Formular "etwas" schiefgelaufen ist.

Beschreibung in Textform – die Art des Fehlers muss in Text erklärt werden, nicht allein durch Farbe oder ein Symbol vermittelt werden (was auch das Risiko bergen würde, gegen 1.4.1 Verwendung von Farbe zu verstoßen).

Häufige Fehler

Eine generische "Formularübermittlung fehlgeschlagen"-Meldung ohne Hinweis darauf, welche(s) Feld(er) sie verursacht hat
Ein Fehler, der nur durch einen roten Rahmen um das Feld angezeigt wird, ohne begleitenden Text, der erklärt, was falsch ist
Eine Fehlermeldung, die visuell in der Nähe des Feldes erscheint, aber nicht programmatisch damit verknüpft ist, sodass ein Screenreader-Nutzer, der zum Feld tabbt, den Fehler überhaupt nicht hört

Wie gute Fehleridentifikation aussieht

<label for="email">E-Mail</label>
<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<p id="email-error" role="alert">
  Bitte geben Sie eine gültige E-Mail-Adresse ein (z. B. name@beispiel.de).
</p>

Die aria-describedby-Verknüpfung stellt sicher, dass ein Screenreader die Fehlermeldung ankündigt, wenn das Feld den Fokus erhält, nicht nur, wenn sie ursprünglich erscheint – entscheidend für einen Nutzer, der direkt zum Feld tabbt, nachdem die Seite bereits geladen oder neu gerendert wurde.

Warum dies meist eine vollständig automatisierbare Prüfung ist

Ob eine Fehlermeldung in Textform existiert und ob sie programmatisch mit ihrem Feld verknüpft ist, sind beide mechanisch verifizierbar – ein Scanner kann das Vorhandensein von Validierungsfehler-Text und seine Verknüpfung mit der relevanten Eingabe mit hoher Sicherheit prüfen, obwohl die Beurteilung, ob der Wortlaut des Fehlers tatsächlich hilfreich ist (statt nur vorhanden), weiterhin von menschlicher Prüfung profitiert.

Häufige Fragen

Was ist WCAG 3.3.1?: Ein Kriterium der Stufe A: Wird ein Eingabefehler automatisch erkannt, muss das fehlerhafte Element benannt und der Fehler dem Nutzer in Textform beschrieben werden – nicht allein über Farbe.
Genügt ein roter Rahmen?: Nein – Farbe allein verstößt gegen 3.3.1. Der Fehler muss als Text vermittelt werden, der benennt, welches Feld betroffen ist und worin das Problem besteht.
Wie hängt 3.3.1 mit 3.3.3 zusammen?: 3.3.1 verlangt, den Fehler zu benennen und zu beschreiben; 3.3.3 (Fehlervorschlag) verlangt zusätzlich einen Korrekturvorschlag, sofern dieser bekannt ist.