Fehlermeldungen in Formularen verständlich und barrierefrei gestalten

Du sendest ein Formular ab. Neben zwei Feldern erscheinen Fehlermeldungen. Wie erfährt jemand, der einen Screenreader nutzt, dass die Abgabe fehlgeschlagen ist und wo eine Korrektur nötig ist?

Für die Rückmeldung kannst Du den Fokus gezielt verschieben oder eine Meldung ausgeben, während der Fokus stehen bleibt. Welche Lösung passt, hängt vom Formular und dem weiteren Weg zur Korrektur ab. Prüfe deshalb den ganzen Ablauf bis zum erneuten Absenden.

Was muss die Fehlermeldung erklären?

„Ungültige Eingabe“ lässt offen, welches Feld gemeint ist. „Ergänze Deine E-Mail-Adresse, zum Beispiel name@example.org“ nennt das Feld und eine mögliche Korrektur. WCAG trennt Fehlererkennung, 3.3.1, und Korrekturvorschläge, 3.3.3.

Das Feld braucht weiterhin seine sichtbare Beschriftung. Wie Du Hinweise und Fehlermeldungen zuordnest, zeigt der Formular-Leitfaden. Hier geht es um den nächsten Schritt: Die Fehlermeldung erscheint nach einer Aktion und muss im Ablauf auffindbar sein.

Eine Fehlerübersicht führt zurück zu den Feldern

Stell Dir ein Kontaktformular mit Name und E-Mail-Adresse vor. Beide fehlen beim Absenden. Eine Übersicht vor den Feldern nennt beide Fehler und verlinkt die betreffenden Eingaben.

Im vorbereiteten Lehrbeispiel erhält die Übersicht nach dem fehlgeschlagenen Absenden den Fokus. Mit Tab erreichst Du den ersten Fehlerlink, mit Enter das Feld. Nach der Eingabe Deines Namens bleibt nur der E-Mail-Fehler übrig. Dein Name bleibt erhalten.

Ein Ausschnitt für eine solche Übersicht:

<div id="errors" role="group" aria-labelledby="errors-title" tabindex="-1">
  <p id="errors-title">Bitte korrigiere Deine Angaben</p>
  <ul>
    <li><a href="#email">Ergänze Deine E-Mail-Adresse.</a></li>
  </ul>
</div>

Die Anwendung muss die Übersicht erst nach der Prüfung zeigen und den Fokus dorthin setzen. Prüfe auch, ob der Link das richtige Feld fokussiert. Der Ausschnitt allein implementiert diese Logik nicht.

GOV.UK dokumentiert eine Fehlerübersicht mit Feldverweisen und Fokussteuerung. Das ist ein konkretes Design-System-Muster. WCAG schreibt nicht für jedes Formular dieselbe Übersicht vor.

Eine Live-Region meldet Änderungen bei gleichbleibendem Fokus

Im zweiten Beispiel bleibt der Fokus nach dem Absenden auf dem Button. Eine bereits vorhandene Meldungsregion bekommt den Text „2 Fehler. Ergänze Deinen Namen. Ergänze Deine E-Mail-Adresse.“ Die Fehlertexte stehen zusätzlich bei den Feldern.

<p id="feedback" role="status" aria-atomic="true"></p>

Die Meldung wird nach der Validierung eingefügt. Die W3C-Technik ARIA19 beschreibt die Benachrichtigung über Live-Regionen. Unser Beispiel mit role="status" ist eine zu prüfende Variante, keine Vorgabe für jede Fehlermeldung.

Bei Statusmeldungen nach WCAG 4.1.3 geht es um Informationen, die ohne Fokuswechsel verfügbar werden. Plane, wie jemand anschließend zu den betroffenen Feldern gelangt. Die Ansage allein korrigiert keine Eingabe.

Wann wird eine Meldung störend wiederholt?

Eine Fehlermeldung beim Absenden und dieselbe Beschreibung beim späteren Besuch des Feldes können unterschiedliche Aufgaben erfüllen. Ob zusätzlich eine störende doppelte Ansage entsteht, musst Du am konkreten Ablauf prüfen.

Auch Fokus und Alert-Rolle sind nicht pauschal unvereinbar: Das GOV.UK-Beispiel kombiniert beides. Ein Verbot von role="alert" zusammen mit aria-describedby wäre deshalb keine brauchbare allgemeine Regel. WAI-ARIA beschreibt mit aria-describedby die Zuordnung einer Beschreibung; daraus folgt kein garantierter Wortlaut für jede dynamische Änderung.

Teste die Erstabgabe, eine unveränderte zweite Abgabe und die Korrektur eines einzelnen Feldes. Notiere, was Du hörst und wo der Fokus steht. Eine Browseransicht des Accessibility Trees belegt noch keine gesprochene Ansage.

So prüfst Du Dein Formular

1. Sende es leer ab. Erkennst Du, dass die Abgabe fehlgeschlagen ist?
2. Erreiche die fehlerhaften Felder per Tastatur. Sind Feld, Fehler und Korrektur verständlich?
3. Sende dieselben Angaben erneut ab. Wird die Rückmeldung weiterhin wahrnehmbar?
4. Korrigiere ein Feld. Bleiben die anderen Eingaben erhalten und verschwinden überholte Fehlerzustände?
5. Sende gültige Angaben ab. Wird der Abschluss verständlich bestätigt?

Wiederhole diese Schritte mit einem Screenreader und scanne die erreichten Zustände getrennt. Der Leitfaden zum Website-Test hilft Dir, weitere Zustände für Deinen Prüfplan auszuwählen.