Formular

Formulare sind die Stelle, an der Barrierefreiheit am unmittelbarsten über Teilhabe entscheidet: Wer ein Kontaktformular, eine Anmeldung oder einen Antrag nicht ausfüllen kann, ist vom Angebot dahinter ausgeschlossen. Fehlende Beschriftungen, unklare Hinweise und Fehlermeldungen ohne Erklärung sind die häufigsten Ursachen.

Wesentliche Anforderungen zur Umsetzung:

• Jedes Eingabefeld hat ein sichtbares, programmatisch verknüpftes Label (<label for="id">)

• Ein Platzhalter ersetzt kein Label. Er verschwindet beim Tippen, hat oft zu wenig Kontrast und wird nicht zuverlässig als Beschriftung ausgewertet

• Zusammengehörige Felder werden gruppiert (<fieldset> mit <legend>) — etwa bei Auswahlgruppen oder Adressblöcken

• Felder, die persönliche Daten erfassen, tragen das passende autocomplete-Attribut, zum Beispiel name, email oder postal-code (1.3.5 Eingabezweck, Level AA)

• Pflichtfelder sind sowohl visuell als auch über das Attribut required gekennzeichnet. Wird ein Sternchen verwendet, gehört seine Bedeutung vor das Formular

• Wenn der sichtbare Text von der programmatischen Beschriftung abweicht, muss er darin enthalten sein — sonst funktioniert Sprachsteuerung nicht (2.5.3 Beschriftung im Namen, Level A)

Bedienung:

• Vollständige Tastaturbedienung in sinnvoller Tab-Reihenfolge

• Sichtbarer Fokusindikator auf jedem Feld

• Ausreichende Kontraste, auch bei Feldrahmen und Zuständen

• Keine unerwarteten Kontextwechsel allein durch das Ausfüllen eines Feldes (3.2.2 Bei Eingabe, Level A)

Wesentliche Anforderungen zur Validierung und Fehlermeldungen:

• Geprüft wird beim Verlassen eines Feldes und beim Absenden, nicht bei jedem Tastendruck. Sonst hören Screenreader-Nutzende einen Fehler, bevor sie mit der Eingabe fertig sind

• Fehlermeldungen stehen im Klartext neben dem Feld und sind über aria-describedby mit ihm verknüpft, der Zustand über aria-invalid="true"

• Farbe allein genügt nie zur Kennzeichnung (1.4.1 Ohne Farbe, Level A)

• Bei mehreren Fehlern hilft eine Zusammenfassung am Formularanfang mit Sprunglinks zu den betroffenen Feldern; der Fokus wandert dorthin

• Die Meldung benennt, was zu korrigieren ist; nicht nur, dass etwas falsch ist (3.3.3 Fehlerempfehlung, Level AA)

• Bereits eingegebene Daten bleiben erhalten

• Angaben, die im selben Vorgang schon gemacht wurden, müssen nicht erneut eingegeben werden (3.3.7 Redundante Eingabe, Level A)

Die maßgeblichen Erfolgskriterien der WCAG finden sich vor allem in der Gruppe 3.3 Hilfestellung bei der Eingabe (3.3.1 bis 3.3.9), ergänzt um 1.3.5, 2.5.3 und 3.2.2.