3.3.3 Error Suggestion (Fehlervorschlag)

WCAG - Definition

Wenn ein Eingabefehler automatisch erkannt wird und Korrekturvorschläge bekannt sind, soll der Benutzer diese Vorschläge erhalten – es sei denn, dies gefährdet Sicherheit oder den Zweck der Seite.

Bedeutung

Das Kriterium baut auf 3.3.1 Error Identification auf.

  • 3.3.1 verlangt, dass der Fehler klar angezeigt wird.

  • 3.3.3 geht weiter: Es reicht nicht nur zu sagen „Fehler“, man soll Hilfe zur Behebung geben.

Bedeutung für Barrierefreiheit:

  • Menschen mit kognitiven Einschränkungen oder Sprachbarrieren profitieren von klaren Hilfestellungen.

  • Auch für alle anderen Nutzer sinkt die Frustration, wenn ein System nicht nur meldet, „Passwort ist ungültig“, sondern erklärt, warum und wie man es korrigieren kann.

Beispiel:

  • „Fehler in E-Mail-Adresse“
  • „Bitte geben Sie eine gültige E-Mail-Adresse ein, z. B. name@example.com“

Ausreichende Techniken

Konkrete Fehlermeldungen mit Beispielen

  • Statt nur aria-invalid="true" → zusätzlich Text mit Erklärung.

<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email" aria-describedby="emailHelp" required>
<span id="emailHelp" class="error">
  Bitte geben Sie eine gültige E-Mail-Adresse ein, z. B. max@muster.de
</span>

Formate erklären

  • Datumsfelder: „Bitte im Format TT.MM.JJJJ eingeben (z. B. 05.10.2025)“.

  • Telefonnummern: „Bitte nur Ziffern eingeben, z. B. 05222 123456“.

Alternativen oder Auswahlfelder nutzen

  • Dropdown statt freier Eingabe (z. B. Bundesland auswählen).

  • Autocomplete: „Meinten Sie …?"

Sicherheits-Ausnahme

  • Bei Passwörtern darf man nicht zu konkret sein (z. B. „Ihr Passwort enthält keine Zahl“) ist okay,
    aber nicht „Ihr Passwort war 'Sommer2024' und fehlt ein Sonderzeichen“, da das ein Sicherheitsrisiko ist.

Beratungstechniken

Wenn du Kunden berätst, achte auf:

Klarheit vor Kürze → Fehlermeldungen sollen verständlich und handlungsorientiert sein.

Konsistenz → Alle Formulare sollten ähnlich strukturierte Fehlermeldungen geben.

Sprache der Zielgruppe → nicht nur technisch, sondern verständlich für Laien.

  • Falsch: „Regex-Pattern nicht erfüllt“

  • Richtig: „Bitte mindestens 8 Zeichen, eine Zahl und ein Sonderzeichen“

Visuelle UND textliche Unterstützung

  • Farbe + Icon + Text (für Screenreader und farbenblinde Nutzer).

 

Fehler

Fehlermeldung ist zu allgemein:

  • „Ungültige Eingabe“ → Nutzer weiß nicht, was er tun soll.

Nur Farbe ohne Text:

  • Rot umrandetes Feld, aber keine textliche Erklärung.

Fehlermeldung zu technisch:

  • „Eingabe entspricht nicht RegEx ^[0-9]{5}$“ (bei Postleitzahl).

Fehlende Ausnahmebehandlung:

  • Bei Passwörtern wird zu viel verraten → Sicherheitslücke.