3.3.1 Fehlererkennung

Was bedeutet das?

Wenn Ihr Formular automatisch feststellt, dass etwas fehlt oder falsch ist, muss die Person erfahren, welches Feld betroffen ist und was das Problem ist. Das geschieht in Worten, etwa „Bitte geben Sie Ihre E-Mail-Adresse ein.“ Ein roter Rahmen allein reicht nicht.

Die Meldung muss auch für Screenreader mit dem Feld verbunden sein. Das gelingt mit aria-invalid und aria-describedby. Das Kriterium gilt immer dann, wenn ein Fehler automatisch erkannt wird, also bei Pflichtfeldern, Formatprüfungen oder ungültigen Werten.

Wem hilft das?

• Blinde Menschen, die rote Markierungen nicht sehen
• Menschen mit Farbsehschwäche
• Menschen mit kognitiven Einschränkungen, die eine klare Erklärung brauchen
• Alle, die ein langes Formular ausfüllen und den Fehler sonst suchen müssten

Typische Fehler

• Fehlerhafte Felder werden nur rot umrandet, ohne erklärenden Text.
• Oben erscheint „Es ist ein Fehler aufgetreten“, ohne zu sagen, welches Feld betroffen ist.
• Die Fehlermeldung steht im Bild oder nur als Symbol.
• Die Fehlermeldung ist sichtbar, aber nicht mit dem Feld verknüpft, sodass der Screenreader sie nicht vorliest.

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Eingabefehler werden erkannt und als Text beschrieben (Validierungsmeldungen ohne Absenden erfasst).

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<label for="email">E-Mail</label>
<input id="email" type="email" class="rot">

<label for="email">E-Mail</label>
<input id="email" type="email" name="email" required
       aria-invalid="true" aria-describedby="email-fehler">
<p id="email-fehler">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>

Das Feld ist als fehlerhaft markiert, und der Screenreader liest die Fehlermeldung beim Feld vor.

Praxistipps

• Setzen Sie aria-invalid erst nach einer Prüfung, nicht schon beim Laden der Seite.
• Bei mehreren Fehlern hilft eine Liste oben im Formular mit Links zu den betroffenen Feldern.

Ratgeber und Muster dazu

• Formulare, die jeder ausfüllen kannAm Formular entscheidet sich, ob jemand kauft, bucht oder aufgibt. Hier lesen Sie, wie Beschriftungen, Pflichtfelder und Fehlermeldungen gebaut sein müssen, damit es mit Tastatur, Screenreader und Vergrößerung klappt.
• In 30 Minuten zum ersten Screenreader-TestEin Screenreader zeigt schonungslos, ob Ihre Seite sauber aufgebaut ist. Mit dieser Anleitung testen Sie Ihre wichtigsten Seiten selbst, mit kostenlosen Werkzeugen und ohne Vorkenntnisse.
• BFSG-Prüfung: So lassen Sie Ihre Website auf Barrierefreiheit prüfenDas BFSG verlangt barrierefreie Angebote, aber kein bestimmtes Prüfverfahren. Hier steht, welche Prüfung was leistet, wie ein Audit abläuft, was es bei uns kostet und was Sie danach in der Hand haben.
• Fehlermeldungen, die helfen statt verwirrenFehler als Text, verknüpft, mit Lösung und Fehlerübersicht.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 3.3.1 Error Identification