WCAG 2.1 - 3.3.1
Error Identification
Wenn ein Eingabefehler automatisch erkannt wird, wird das fehlerhafte Element identifiziert und der Fehler dem Benutzer in Textform beschrieben.
Inhalt
Was Bedeutet das Success Criterium 3.3.1 - Error Identification?Warum ist es so wichtig, das Success Criterium 3.3.1 - Error Identification zu beachten?Was hat das Success Criterium 3.3.1 - Error Identification mit dem BFSG zu tun?Lösungen für 3.3.1 - Error Identification anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 3.3.1 - Error Identification?Was Bedeutet das Success Criterium 3.3.1 - Error Identification?
Das Success Criterion 3.3.1 (Error Identification) der WCAG verlangt, dass, wenn ein Benutzer einen Fehler bei der Eingabe von Daten macht (z. B. in einem Formularfeld), der Fehler klar identifiziert und dem Benutzer mitgeteilt wird. Das bedeutet: Immer, wenn zum Beispiel eine Pflichtangabe fehlt oder eine Eingabe nicht dem erwarteten Format entspricht, muss der Benutzer eine verständliche Rückmeldung erhalten, welche Felder betroffen sind und was falsch ist. Wichtig ist dabei, dass diese Rückmeldung verständlich, spezifisch und möglichst eindeutig ist. Das kann visuell (Text, Symbole, Farben), aber auch für Screenreader-Nutzer erfolgen – also niemals nur mit Farbakzenten arbeiten.
Warum ist es so wichtig, das Success Criterium 3.3.1 - Error Identification zu beachten?
Wenn Fehler bei der Dateneingabe nicht klar kommuniziert werden, kann dies für Menschen mit oder ohne Behinderung zu großen Problemen führen, da sie nicht wissen, wie sie diese korrigieren sollen. Gerade Menschen mit Sehbehinderung oder einer Lernbehinderung sind auf klare und eindeutige Rückmeldungen angewiesen. Ohne diese Rückmeldung kann ein Formular schnell zur Barriere und Frustrationsquelle werden – und im schlimmsten Fall vom Nutzer nicht bedient werden.
Was hat das Success Criterium 3.3.1 - Error Identification mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Websites in Deutschland u. a. zur Einhaltung der Anforderungen der WCAG, um allen Menschen – unabhängig von ihren Fähigkeiten – gleichberechtigten Zugang zu ermöglichen. Wenn Fehlerhinweise nicht klar und zugänglich sind, können viele Benutzer die Funktionen der Website nicht nutzen. Eine Seite, die SC 3.3.1 nicht umsetzt, ist daher unzweifelhaft nicht BFSG-konform, weil sie die Teilhabe vieler Nutzender verhindert.
Lösungen für 3.3.1 - Error Identification anhand von Codebeispielen
Falscher Code
<form>
<label for="email">E-Mail-Adresse:</label>
<input type="text" id="email" name="email">
<button type="submit">Absenden</button>
<!-- Nach dem Absenden wird bei fehlerhafter Eingabe nur das Feld rot umrandet, ohne Text-Hinweis -->
</form>Korrekter Code
<form>
<label for="email">E-Mail-Adresse:</label>
<input type="text" id="email" name="email" aria-describedby="email-error">
<span id="email-error" style="color: red;" role="alert">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
<button type="submit">Absenden</button>
<!-- Fehlermeldung wird als Text ausgegeben, mit aria-describedby und role="alert" für Screenreader. -->
</form>Im schlechten Beispiel gibt es keinerlei Text, der den Fehler benennt. Das Feld wird nur farblich umrahmt, was für viele Menschen (Sehbehinderte, Farbenblinde, Screenreader-Nutzer) nicht ausreicht. Das gute Beispiel bietet eine textuelle Fehlermeldung, die zusätzlich mit aria-describedby und role="alert" für unterstützende Technologien (wie Screenreader) zugänglich gemacht wird.
Falscher Code
<label for="pwd">Passwort:</label>
<input type="password" id="pwd" name="pwd">
<div class="error">Ein Fehler ist aufgetreten.</div>Korrekter Code
<label for="pwd">Passwort:</label>
<input type="password" id="pwd" name="pwd" aria-describedby="pwd-error">
<div id="pwd-error" class="error" role="alert">
Ihr Passwort muss mindestens 8 Zeichen lang sein und eine Zahl enthalten.
</div>Im schlechten Code ist die Fehlerbeschreibung nicht eindeutig – man weiß nicht, was gemacht werden muss. Im guten Beispiel ist die Meldung spezifisch und hilft, den Fehler gezielt zu korrigieren. Durch aria-describedby und role="alert" erreichen die Informationen auch Screenreader-Nutzer.
Wie löse ich Verstöße gegen das Success Criterium 3.3.1 - Error Identification?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.