3.3.1 Fehlererkennung

1. Was ist das Ziel dieses Kriteriums?

Formulare sind wie der erste Eindruck beim Date – wenn etwas schiefgeht, möchtest du wissen, was genau nicht passt. Aber stell dir vor, du füllst ein wichtiges Formular aus, klickst auf „Absenden“ und … nichts passiert. Oder noch schlimmer: Etwas ist offensichtlich falsch, aber niemand sagt dir, was.

Menschen, die auf Screenreader angewiesen sind oder Farben nicht unterscheiden können, stehen bei rein visuellen Fehlermeldungen buchstäblich im Dunkeln. Das Ziel von Erfolgskriterium 3.3.1 ist daher klar: Wenn ein Fehler automatisch erkannt wird, muss in Text beschrieben werden, was falsch ist und wo das Problem liegt.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um automatisch erkannte Eingabefehler – also Situationen, in denen das System merkt, dass etwas nicht stimmt. Egal, ob die Prüfung direkt im Browser oder erst nach dem Absenden auf dem Server passiert.

Sobald ein Fehler erkannt wird, müssen zwei Dinge passieren:

• Kennzeichnen: Das fehlerhafte Feld wird eindeutig benannt
• Beschreiben: Der Fehler wird in verständlichem Text erklärt

Was gilt als Eingabefehler?

• Pflichtfelder, die leer gelassen wurden
• Daten im falschen Format (z. B. „max.mustermann“ statt „max@mustermann.de“)
• Werte außerhalb des erlaubten Bereichs (z. B. Geburtsjahr 2050)

Wichtig: Farben, Icons und visuelle Hervorhebungen darfst du gerne zusätzlich verwenden – aber der Text ist Pflicht. Ein roter Rahmen allein reicht nicht aus (siehe auch Verwendung von Farbe).

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du sitzt im Café, füllst ein Online-Formular aus und bekommst nur einen roten Rahmen um ein Feld – aber keine Erklärung, was falsch ist. Frustrierend, oder? Für Menschen mit Behinderungen kann das zur kompletten Blockade werden.

Textbasierte Fehlermeldungen schaffen Barrierefreiheit, weil sie:

• blinden und sehbehinderten Menschen ermöglichen, Fehler über den Screenreader zu verstehen
• Menschen mit Farbsehschwäche helfen, die eine reine Farbkodierung nicht zuverlässig wahrnehmen – das betrifft etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Herkunft
• Menschen mit kognitiven Einschränkungen durch klare Sprache bei der Korrektur unterstützen
• alle in schwierigen Situationen entlasten (schlechte Beleuchtung, Stress, Zeitdruck)

Und nicht zuletzt: Klare Fehlermeldungen reduzieren Supportanfragen und Abbrüche – ein Gewinn für alle.

4. So setzt du das Kriterium erfolgreich um

Die Qualität der Fehlermeldungen entscheidet darüber, ob Menschen ihr Ziel erreichen oder frustriert abbrechen. Hier die bewährtesten Praktiken:

Gute Fehlermeldungen sind …

• spezifisch: Statt „Ungültige Eingabe“ besser „Die E-Mail-Adresse muss ein @-Zeichen enthalten“
• verständlich: Verwende einfache Sprache und vermeide Fachjargon
• hilfreich: Gib konkrete Hinweise zur Korrektur („Format: TT.MM.JJJJ“) – das ist der Kern von Fehlerempfehlung
• auffindbar: Platziere sie nah am betroffenen Feld und/oder liste sie am Formularanfang mit Links zu den Feldern auf

Technische Umsetzung:

• Nutze aria-invalid="true" für fehlerhafte Felder
• Verknüpfe Fehlermeldungen mit aria-describedby, damit sie beim Fokussieren des Feldes vorgelesen werden
• Setze nach dem Absenden den Fokus auf eine Fehlerübersicht oder das erste fehlerhafte Feld
• Für Meldungen, die ohne Fokuswechsel dynamisch erscheinen, eignen sich Live-Regionen wie role="alert" (siehe Statusmeldungen) – setze sie sparsam ein, damit nicht jede Meldung doppelt vorgelesen wird

Bewährtes Muster:

<label for="email">E-Mail-Adresse (Pflichtfeld)</label>
<input id="email" type="email" aria-invalid="true"
  aria-describedby="email-error">
<p id="email-error">
  Fehler: Die E-Mail-Adresse ist ungültig. Beispiel: max@beispiel.de
</p>

Werkzeuge und Hilfsmittel:

• Verwende Validierungsbibliotheken, die Fehler zugänglich ausgeben
• Teste mit Screenreadern (NVDA, JAWS, VoiceOver)
• Prüfe die Verständlichkeit der Meldungen mit echten Nutzer:innen

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 3.3.1 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.

1. Zielgruppe erweitern

Laut WHO leben rund 1,3 Milliarden Menschen weltweit mit einer erheblichen Behinderung. Klare Fehlermeldungen helfen ihnen – und allen anderen auch. Gerade bei Bestellungen oder Anmeldungen zahlt sich das direkt aus.

2. Kundensupport entlasten

Verständliche Fehlermeldungen reduzieren Supportanfragen. Statt „Warum funktioniert das Formular nicht?“ bekommen Menschen sofort die nötige Information, um das Problem selbst zu lösen. Das spart Zeit und Kosten.

3. Weniger Abbrüche

Wer Fehler schnell versteht und korrigieren kann, bricht seltener ab. Jedes Formular, das am Ende erfolgreich abgeschickt wird, ist eine gewonnene Anfrage oder Bestellung.

Und nicht zuletzt die rechtliche Seite: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Angebote für Verbraucher:innen, etwa Online-Shops und Bankdienstleistungen. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 3.3.1 gehört dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht ohnehin verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 3.3.1 Error Identification (Level A)

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Kurz gesagt: Wird ein Eingabefehler automatisch erkannt, muss das betroffene Feld benannt und der Fehler in Textform beschrieben werden.