Fehleridentifikation (WCAG 3.3.1): Fehler erkennen und benennen

Wenn ein Nutzer ein Formular abschickt und nur ein rotes Ausrufezeichen sieht, ohne zu wissen, welches Feld betroffen ist und was genau falsch ist, ist das keine Hilfe – erst recht nicht für Screenreader-Nutzer, die das Ausrufezeichen nicht sehen. WCAG 3.3.1 fordert eine klare, textbasierte Fehlerkommunikation. Das BFSG macht dies zur Pflicht.

Was fordert WCAG 3.3.1 konkret?

Wenn ein Eingabefehler automatisch erkannt wird (z. B. durch clientseitige Validierung oder nach dem Absenden), muss: 1. Das fehlerhafte Element identifiziert werden: Der Nutzer muss wissen, welches Feld betroffen ist – nicht nur „Es gibt einen Fehler", sondern „Das Feld E-Mail-Adresse enthält einen Fehler". 2. Der Fehler in Textform beschrieben werden: Nicht nur Farbe oder Icons, sondern lesbarer Text. Ein rotes Formularfeld-Rahmen allein reicht nicht aus – es muss ein Fehlertext vorhanden sein. Das Kriterium gilt für alle automatisch erkennbaren Fehler: fehlende Pflichtfelder, falsches Format (E-Mail, Telefon, Datum), ungültige Werte und Validierungsfehler.

Technische Umsetzung

Inline-Fehlermeldungen: Direkt neben oder unter dem fehlerhaften Feld, per aria-describedby verknüpft: <input id="email" aria-describedby="email-error" aria-invalid="true"> <span id="email-error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span> Fehlerübersicht: Eine Zusammenfassung aller Fehler am Anfang des Formulars, mit Links zu den betroffenen Feldern. aria-invalid="true": Markiert das Feld programmatisch als fehlerhaft – Screenreader sagen dann „ungültig" an. Fokus auf erstes fehlerhaftes Feld: Nach dem Absenden den Fokus auf das erste fehlerhafte Feld oder die Fehlerübersicht setzen. role="alert": Fehlermeldungen bei Live-Validierung als ARIA-Live-Region, damit Screenreader sie ansagen.

Häufige Fehler bei der Fehleridentifikation

Nur Farbänderung: Ein rot umrandetes Feld ohne Fehlertext – farbenblinde Nutzer sehen die Änderung nicht. Generische Meldungen: „Bitte überprüfen Sie Ihre Eingaben" ohne Benennung der betroffenen Felder. Fehlermeldung ohne Feldzuordnung: „Die E-Mail-Adresse ist ungültig" am Seitenende, ohne Link zum Feld. JavaScript-Only: Fehlermeldungen, die nur per JavaScript angezeigt werden und bei deaktiviertem JS fehlen. Fehlende aria-invalid: Das Feld ist visuell als fehlerhaft erkennbar, aber programmatisch nicht markiert.

WCAG-Bezug

WCAG 3.3.1 Error Identification ist Level A und damit über das BFSG und die EN 301 549 (Abschnitt 11.3.3.1) verbindlich. Es bildet die Basis der Fehlerbehandlungs-Kriterien: WCAG 3.3.2 (Labels or Instructions, Level A) fordert Beschriftungen und Anweisungen vor der Eingabe. WCAG 3.3.3 (Error Suggestion, Level AA) fordert zusätzlich Korrekturvorschläge. WCAG 3.3.4 (Error Prevention, Level AA) fordert bei rechtlich/finanziell bindenden Formularen eine Überprüfungsmöglichkeit. Zusammen bilden 3.3.1 bis 3.3.4 ein vollständiges Fehlerbehandlungs-Framework.