- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 20 / 193
3.3.1 Fehlererkennung
Wenn ein Formular eine Eingabe zurückweist, muss die Seite in Worten sagen, welches Feld falsch ist und was daran nicht stimmt.
/ Was es verlangt
Erkennt Software einen Eingabefehler, im Browser oder auf dem Server, müssen zwei Dinge geschehen: Das fehlerhafte Feld wird benannt, und der Fehler wird dem Nutzer in Textform beschrieben. Ein roter Rahmen allein leistet beides nicht für jemanden, der Farben oder den Bildschirm nicht sieht. Menschen mit Screenreader, Menschen mit Farbfehlsichtigkeit und Menschen, denen Formulare schwerfallen, brauchen einen Satz, der Feld und Problem nennt, etwa „E-Mail: Geben Sie eine Adresse mit At-Zeichen ein“.
Das Kriterium gilt nur für Fehler, die automatisch erkannt werden, und nennt keine Ausnahmen. Es verlangt keinen Vorschlag zur Korrektur der Eingabe, das ist Sache von 3.3.3 auf Stufe AA, auch wenn eine gute Meldung oft beides leistet. Farbe und Symbole dürfen den Text begleiten und können ihn nicht ersetzen. Eine Zusammenfassung, die nur „Das Formular enthält Fehler“ sagt, besteht nicht, weil sie das fehlerhafte Element nicht benennt. Eine Meldung, die kein Feld nennt, scheitert aus demselben Grund.
/ Woran Seiten scheitern
- Ein ungültiges Feld bekommt einen roten Rahmen und keinen Text.
- Das Formular lädt neu mit einem Banner, das nur sagt, dass es Fehler gibt, und kein Feld nennt.
- Der Fehler wird als Symbol gezeigt, das keine Textalternative hat.
- Eine Meldung erscheint nur optisch neben dem Feld und ist im Code nicht mit ihm verknüpft, sodass ein Screenreader-Nutzer sie bei der Rückkehr zum Feld nicht hört.
- Das einzige Signal ist eine Absendeschaltfläche, die deaktiviert bleibt, ohne Erklärung, welches Feld sie blockiert.
/ So prüfen Sie es selbst
- Senden Sie das Formular leer ab, dann mit absichtlich falschen Werten wie einer E-Mail-Adresse ohne At-Zeichen. Nutzen Sie ein Testformular, wo ein echtes Absenden eine Bestellung auslösen würde.
- Prüfen Sie bei jedem Fehler, ob es Text gibt, ob er das Feld nennt oder direkt daneben steht und ob er sagt, was nicht stimmt.
- Sehen Sie sich die Seite in Graustufen an oder blenden Sie Farbe gedanklich aus. Jeder Fehler muss weiterhin auffindbar sein.
- Untersuchen Sie ein fehlerhaftes Feld in den Entwicklerwerkzeugen und suchen Sie nach aria-invalid="true" und einem aria-describedby, das auf die id der Meldung verweist.
- Wiederholen Sie das Absenden mit einem laufenden kostenlosen Screenreader wie NVDA. Achten Sie auf die Fehler, wenn sie erscheinen, und noch einmal, wenn Sie mit der Tabulatortaste zum Feld gehen.
/ So beheben Sie es
- Geben Sie neben jedem fehlerhaften Feld eine Textmeldung aus, vergeben Sie für die Meldung eine id und verweisen Sie vom input-Element mit aria-describedby darauf.
- Setzen Sie aria-invalid="true" auf das Feld, solange der Fehler besteht, und entfernen Sie es, sobald der Wert angenommen ist.
- Nennen Sie das Feld in der Meldung, etwa „Postleitzahl: Verwenden Sie das Format 00000“, damit sie auch für sich allein gelesen Sinn ergibt.
- Ergänzen Sie nach einem fehlgeschlagenen Absenden oben eine Zusammenfassung, die jeden Fehler als Link zu seinem Feld aufführt, und setzen Sie den Fokus darauf oder geben Sie ihr role="alert".
- Behalten Sie den roten Rahmen und das Symbol als zusätzliche Signale, niemals als die einzigen.
/ Was unser Scanner prüft
Die Prüfung error-not-associated findet sichtbaren Text in einem Element mit role="alert" oder mit „error“ oder „invalid“ im Klassennamen und nimmt das erste Feld im selben Block. Sie meldet die Meldung, außer das Feld verweist über aria-describedby oder aria-errormessage darauf oder hat aria-invalid="true" neben einem Alert. Sie sendet nichts ab, Fehler, die erst nach dem Absenden erscheinen, sieht sie also nicht.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Reicht ein roter Rahmen, um einen Formularfehler anzuzeigen?
Nein. Das Kriterium verlangt, dass der Fehler in Textform beschrieben wird, und 1.4.1 Benutzung von Farbe untersagt zusätzlich, Informationen allein über Farbe zu vermitteln. Ein roter Rahmen darf als visuelle Hilfe bleiben. Daneben muss eine Meldung in Worten stehen, die sagt, welches Feld betroffen ist und was nicht stimmt.
Was ist der Unterschied zwischen 3.3.1 und 3.3.3?
3.3.1 Fehlererkennung, Stufe A, verlangt, dass das fehlerhafte Feld benannt und der Fehler in Textform beschrieben wird. 3.3.3 Fehlerempfehlung, Stufe AA, geht einen Schritt weiter: Weiß das System, wie sich die Eingabe korrigieren lässt, muss es das sagen, außer dies würde die Sicherheit oder den Zweck des Inhalts gefährden.
Brauchen Fehlermeldungen aria-describedby oder aria-invalid?
Das Kriterium nennt kein Attribut. Es verlangt das Ergebnis: Das Element wird benannt und der Fehler in Textform beschrieben. In HTML sind aria-invalid am Feld und aria-describedby mit Verweis auf die Meldung der übliche Weg, dieses Ergebnis zu einem Screenreader-Nutzer zu bringen, der sonst womöglich nie auf den Text neben dem Feld stößt.