Barrierefreiheit

Formularfehler werden nicht programmatisch erkennbar gemacht

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Nach fehlgeschlagenem Absenden sind fehlerhafte Felder nur farblich markiert oder per Text daneben beschrieben, aber nicht per aria-invalid und aria-describedby mit dem Feld verknüpft (WCAG 3.3.1/3.3.3).

Warum es zählt

Screenreader-Nutzer springen per Tab durch das Formular und hören an jedem Feld nur „Eingabefeld" — ohne aria-invalid erfahren sie nie, welches Feld den Fehler hat und warum. Farbe allein hilft zudem Farbenblinden nicht.

So behebst du es

  1. Setze bei jedem fehlerhaften Feld aria-invalid="true" und verknüpfe die Fehlermeldung per aria-describedby mit der Feld-ID.
  2. Formuliere die Meldung konkret („PLZ muss fünfstellig sein"), nicht nur „Ungültige Eingabe".
  3. Führe nach dem Absenden den Fokus zur Fehlerzusammenfassung oben im Formular, die auf die betroffenen Felder verlinkt.
  4. Entferne aria-invalid wieder, sobald das Feld korrigiert ist — sonst bleibt der Fehler-Status bei gültigen Eingaben stehen.

Zum Nachlesen