3.3.1 Fehleridentifikation (Error Identification)

WCAG – Definition

Wenn ein Eingabefehler automatisch erkannt wird, muss der Fehler dem Benutzer in Textform beschrieben werden.

Eingabefehler = Eingaben, die von der Website nicht akzeptiert werden (z. B. falsches Format, Pflichtfeld nicht ausgefüllt, Wert außerhalb des erlaubten Bereichs).

Bedeutung

  • Menschen mit Behinderungen (z. B. Screenreader-Nutzer, Menschen mit Lernschwierigkeiten, Menschen mit eingeschränktem Sehvermögen) müssen verstehen können, was genau falsch gelaufen ist.

  • Visuelle Hinweise allein (rote Umrandung, Ausrufezeichen) reichen nicht aus, da diese Informationen nicht immer wahrgenommen werden.

  • Eine klare, textbasierte Erklärung ist notwendig („Bitte geben Sie eine gültige E-Mail-Adresse ein.“ statt nur „Fehler“).

Beispiel:

Nur rotes Feld: „E-Mail-Adresse falsch“

Textlicher Hinweis: „Bitte geben Sie eine gültige E-Mail-Adresse im Format name@example.de ein.“

Ausreichende Techniken

Textbasierte Fehlermeldung anzeigen

  • Direkt unter oder neben dem Feld.

  • In Klartext beschreiben, was falsch ist.

  • Mit aria-describedby oder einer Fehler-Region verknüpfen.

<form>
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" aria-describedby="email-error" required>
  <span id="email-error" class="error">Bitte geben Sie eine gültige E-Mail-Adresse im Format name@example.de ein.</span>
</form>

Pflichtfelder kennzeichnen

<input id="name" name="name" required aria-describedby="name-error">
<span id="name-error" class="error">Dieses Feld ist erforderlich.</span>

Dynamische Fehlerbehandlung mit JavaScript

  • Fehlernachrichten erst bei Eingabefehler einblenden.

  • Screenreader-kompatibel: role="alert" oder aria-live="assertive" verwenden.

const email = document.getElementById('email');
const error = document.getElementById('email-error');

email.addEventListener('input', () => {
  if (!email.validity.valid) {
    error.textContent = "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
  } else {
    error.textContent = "";
  }
});

Beratungstechniken

  • Klarheit: Fehlermeldungen sollen konkret, höflich und eindeutig sein. („Ihr Passwort muss mindestens 8 Zeichen haben.“)

  • Position: Am besten direkt beim Feld und zusätzlich am Anfang des Formulars eine Übersicht aller Fehler.

  • Kombination von Text und visuellem Hinweis: Farbe + Icon + Text.

  • Sprache: Leicht verständlich, ohne Fachjargon.

  • Barrierefreiheit prüfen: Mit Screenreader testen, ob Fehlermeldungen vorgelesen werden.

Fehler

  1. Nur Farbe verwenden (z. B. rote Umrandung ohne Text).

  2. Unklare Fehlermeldungen („Ungültige Eingabe“ statt „Bitte geben Sie ein Datum im Format TT.MM.JJJJ ein.“).

  3. Fehler nur oben im Formular anzeigen, ohne direkten Bezug zum Feld.

  4. Fehlermeldung nicht mit Feld verknüpft → Screenreader liest den Fehler nicht.

  5. Dynamische Meldungen ohne aria-live → Screenreader erkennt Änderung nicht.