Barrierefreie Web-Formulare – die Basics

Barrierefreie Web-Formulare folgen alten Regeln. Dennoch werden immer wieder die gleichen Fehler gemacht. In diesem Beitrag fasse ich die wesentlichen Anforderungen zusammen.

Must Haves

Die folgenden Anforderungen sind durch geltende Richtlinien wie WCAG und EN vorgeschrieben.

1. Verwenden Sie möglichst native und einfache Elemente
   Verzichten Sie auf komplexe UI-Komponenten wie Multi-Selects oder individuell gestaltete Steuerelemente. Stattdessen sollten Sie bewährte, barrierearme HTML-Elemente wie Checkboxen und Radio-Buttons einsetzen. Diese sind nicht nur für Screenreader-Nutzer*innen besser zugänglich, sondern bieten auch in der Tastaturbedienung und auf mobilen Geräten eine deutlich verbesserte Nutzererfahrung.
2. Alle interaktiven Elemente müssen vollständig per Tastatur erreichbar und bedienbar sein
   Stellen Sie sicher, dass Nutzer*innen ohne Maus sämtliche Funktionen der Website oder Anwendung über die Tastatur nutzen können. Dazu gehört sowohl die Navigation als auch das Auslösen und Verändern von Bedienelementen. Eine durchdachte Fokusführung und die Vermeidung von versteckten oder nicht fokussierbaren Elementen sind dabei essenziell.
3. Alle interaktiven Elemente benötigen einen zugänglichen Namen
   Damit assistive Technologien wie Screenreader Inhalte korrekt vermitteln können, muss jedes Bedienelement eindeutig benannt sein. In der Regel erfolgt dies durch ein sichtbares <label>-Element. Alternativ können auch aria-label oder aria-labelledby verwendet werden, um einem Element einen barrierefreien Namen zuzuweisen. So wird sichergestellt, dass Nutzer*innen mit assistiven Technologien die Funktion und Bedeutung eines Elements klar erfassen können.
4. Jedes Formularfeld benötigt eine feste, visuell erkennbare Beschriftung
   Die Beschriftung sollte bei Eingabefeldern idealerweise links oder oberhalb des Feldes platziert sein, bei Checkboxen und Radio-Buttons rechts daneben. Platzhaltertexte (placeholder) dürfen nicht als Ersatz für Labels verwendet werden, da sie weder dauerhaft sichtbar noch zuverlässig von assistiven Technologien erkannt werden. Nur feste Labels gewährleisten eine konsistente Zugänglichkeit und Verständlichkeit – sowohl visuell als auch technisch.
5. Beschriftungen und Fehlermeldungen müssen klar und verständlich formuliert sein
   Verwenden Sie einfache, eindeutige Sprache, damit alle Nutzer*innen – unabhängig von technischen Vorkenntnissen oder kognitiven Fähigkeiten – die Bedeutung erfassen können. Fehlerhinweise sollten präzise erklären, was falsch gelaufen ist, und idealerweise konkrete Hinweise zur Korrektur geben. Vermeiden Sie Fachjargon oder allgemeine Aussagen wie „Fehler beim Absenden“.
6. Verwenden Sie passende autocomplete-Attribute für nutzerbezogene Eingaben
   Wenn Nutzer*innen persönliche Daten wie Name, E-Mail-Adresse oder Zahlungsinformationen eingeben, erleichtern korrekt gesetzte autocomplete-Attribute die Nutzung erheblich. Sie ermöglichen es Browsern und assistiven Technologien, Eingaben vorzuschlagen und automatisch zu vervollständigen – das spart Zeit, reduziert Fehler und verbessert die Zugänglichkeit für alle.
7. Verwenden Sie fieldset und legend, um zusammengehörige Formularinhalte semantisch zu gruppieren
   Wenn mehrere Eingabefelder thematisch zusammengehören – etwa Auswahlmöglichkeiten innerhalb einer Kategorie – sollten sie mit einem fieldset gruppiert und durch ein legend beschrieben werden. Dies sorgt für eine klare semantische Struktur und hilft insbesondere Screenreader-Nutzer*innen, den Kontext und die Bedeutung der enthaltenen Elemente besser zu erfassen.
8. Fehlermeldungen müssen korrekt mit den betroffenen Feldern verknüpft sein
   Nutzen Sie aria-describedby, um Fehlermeldungen programmatisch mit dem entsprechenden Eingabefeld zu verbinden. So können Screenreader den Fehler direkt im Kontext des betroffenen Feldes ausgeben. Werden Fehlermeldungen dynamisch angezeigt (z. B. nach dem Absenden eines Formulars), sollten sie zusätzlich mit role="alert" oder aria-live="assertive" versehen werden, damit assistive Technologien die neue Information unmittelbar ankündigen.
9. Pflichtfelder klar kennzeichnen und zu Beginn erläutern
   Um Fehler bei der Eingabe zu vermeiden, sollten Pflichtfelder eindeutig und konsistent markiert sein – beispielsweise durch ein Sternchen (*) und/oder eine textuelle Ergänzung wie „Pflichtfeld“. Erläutern Sie zu Beginn des Formulars, wie Pflichtfelder gekennzeichnet sind, damit Nutzer*innen von Anfang an wissen, worauf sie achten müssen. Dies unterstützt insbesondere Menschen mit kognitiven Einschränkungen oder assistiven Technologien bei der fehlerfreien Formularbearbeitung.
10. Wichtige oder komplexe Eingaben sollten vor dem Absenden zusammengefasst werden
    Bei sensiblen oder umfangreichen Formularen – etwa bei Verträgen, Bestellungen oder Anträgen – sollte den Nutzer*innen am Ende eine Zusammenfassung ihrer Angaben angezeigt werden. So können sie alle Informationen noch einmal überprüfen und gegebenenfalls korrigieren, bevor sie das Formular endgültig absenden. Das reduziert Fehler, stärkt die Kontrolle über eigene Daten und verbessert die Nutzerfreundlichkeit für alle – insbesondere bei kognitiven Einschränkungen.

Best Practices

Das Folgende sind Empfehlungen, ich finde es aber sinnvoll, sie tatsächlich auch umzusetzen.

Pflichtfelder sollten auch im Code als Pflichtfelder markiert werden, etwa durch ARIA required. Das erleichtert die Prüfung durch assistive Technologien.
Wo immer möglich sollten für Eingabefelder klare Datentypen festgelegt werden. Auch das hilft bei der Fehlervermeidung. Beispiele sind E-Mail, Geburtsdatum und so weiter.
Seien Sie so fehlertolerant wie möglich: Oft gibt es zum Beispiel keinen Grund, eine Zeichenbegrenzung zu haben oder bestimmte Zeichen nicht zu erlauben.
Setzen Sie eine dynamische Validierung ein, die sofort nach dem Verlassen eines Eingabefeldes (z. B. durch Tastaturfokuswechsel) eine Rückmeldung gibt, ob die Eingabe korrekt ist. Diese Validierung sollte visuell und auch über assistive Technologien zugänglich sein. So können Nutzerinnen sofortige Hinweise erhalten und gegebenenfalls Fehler in ihren Eingaben direkt korrigieren. Achten Sie darauf, dass Fehlermeldungen klar und verständlich sind und dass Nutzerinnen bei Bedarf die Möglichkeit haben, die Fehler schnell zu beheben.

Wenn nach dem Absenden eines Formulars Fehler auftreten, sollte der Titel der Seite (über das