Wie würdest du ein Signup-Formular bauen, dessen Validierungsfehler wirklich brauchbar sind, auch für Screenreader-Nutzer?

Nutz echte Labels, die an die Inputs gebunden sind, validier bei blur und beim Absenden statt bei jedem Tastendruck, und setz jede Fehlermeldung neben ihr Feld, mit aria-describedby darauf zeigend plus aria-invalid auf dem Input. Beim Absenden verschieb den Fokus auf das erste ungültige Feld oder auf eine Fehlerzusammenfassung. Behalt native Constraints und Typen, damit Mobiltastaturen und Autofill funktionieren, und signalisier Fehler nie allein über Farbe.

Ich fange nativ an, weil das meiste dann gratis kommt: ein echtes label mit for-Attribut, der richtige Input-Typ, damit Mobil die passende Tastatur zeigt, autocomplete-Attribute, damit Passwortmanager funktionieren, und required, wo es zutrifft. Beim Timing validiere ich ein Feld bei blur und alles beim Absenden, nie bei jedem Tastendruck, denn jemandem zu sagen, seine E-Mail sei ungültig, während er sie tippt, ist einfach nur Lärm. Sobald ein Feld als ungültig markiert ist, validiere ich beim Tippen allerdings schon nach, damit der Fehler verschwindet, sobald er behoben ist. Jede Meldung sitzt direkt unter ihrem Input, und das Input bekommt aria-invalid true und aria-describedby auf die Id der Meldung, und genau das sorgt dafür, dass ein Screenreader den Fehler ansagt, wenn der Fokus dort landet. Bei einem fehlgeschlagenen Absenden setze ich den Fokus auf das erste ungültige Feld, oder auf eine kurze Fehlerzusammenfassung oben mit Links zu den Feldern, falls es mehrere sind. Und Fehler sind nie nur farbig; es gibt Text und ein Icon, denn ein roter Rahmen allein bedeutet für viele Menschen gar nichts.