Barrierefreie Formulare: Labels, Fehlermeldungen und Autocomplete

Ziel

Formulare, die eine Person mit Tastatur, Screenreader, Spracheingabe oder Browser-Autofill ausfüllen und, wenn etwas falsch ist, ohne Rätselraten korrigieren kann.

Voraussetzungen

Native Steuerelemente (input, select, textarea, button type="submit") statt gestylter div-Elemente, sowie eine schriftliche Liste der Felder mit ihren Validierungsregeln und den Pflichtfeldern.

Schritte

1. Jedes Steuerelement explizit beschriften: <label for="email">, dessen for mit der id des Steuerelements übereinstimmt (die von der WAI-Anleitung bevorzugte Verknüpfung). aria-label oder aria-labelledby nur verwenden, wo ein sichtbares Label unmöglich ist; Platzhaltertext ist kein Label.
2. Zusammengehörige Steuerelemente mit fieldset und legend gruppieren (Radiogruppen, Adressblöcke), damit der Gruppenname bei jeder Option angesagt wird.
3. Die Pflicht im Labeltext angeben («Name (Pflichtfeld)») und zusätzlich das Attribut required setzen, damit Browser und assistive Technologien es ebenfalls erkennen.
4. autocomplete-Tokens bei Feldern zur Person ergänzen: name, given-name, family-name, email, username, new-password, current-password, one-time-code, postal-code. MDN weist darauf hin, dass gültige Tokens das WCAG-2.2-Erfolgskriterium 1.3.5 (Identify Input Purpose) erfüllen und dass ungültige oder frei erfundene Werte, mit denen Autofill unterlaufen werden soll, dasselbe Kriterium verletzen, weil der Zweck dann nicht mehr maschinenlesbar ist.
5. Beim Absenden validieren, die eingegebenen Werte erhalten und beschreiben, wie jedes Problem zu beheben ist («Datum als TT.MM.JJJJ eingeben»), nicht nur, dass es ungültig ist.
6. Bei einem Fehlschlag oben eine Fehlerzusammenfassung mit einem Link zu jedem Feld anzeigen, jedes Feld mit aria-invalid="true" kennzeichnen und seine Meldung über aria-describedby verknüpfen; den Fokus zur Zusammenfassung oder zum ersten ungültigen Feld bewegen.
7. Läuft die Validierung ohne Seitenladevorgang, das Ergebnis in einer Live-Region (role="alert") ansagen, damit Screenreader es hören.
8. Erfolg sowohl im Text als auch farblich bestätigen, und bei zerstörerischen Absendevorgängen um Bestätigung bitten.
9. Nur mit Tastatur testen, mit einem Screenreader testen und mit aktiviertem Browser-Autofill testen.

Erwartetes Ergebnis

Jedes Feld hat einen zugänglichen Namen und einen maschinenlesbaren Zweck; jeder Fehler ist per Tastatur erreichbar, wird von assistiven Technologien vorgelesen und sagt der Person, was zu ändern ist; Autofill füllt die richtigen Felder.

Grenzen und Prüfbasis

Folgt den zitierten WAI-Anleitungen und der MDN-Referenz. Automatisierte Prüfwerkzeuge finden fehlende Labels, aber keine unbrauchbaren Meldungen; individuelle Widgets brauchen vollständige ARIA-Muster, die über diesen Rahmen hinausgehen. Es wird keine Messung behauptet.