Barrierefreie Formulare stellen sicher, dass jede Eingabe, Auswahl und Aktion für alle Nutzer*innen zugänglich ist. Dazu gehören klar beschriftete Felder, logische Tab-Reihenfolge, sichtbare Fokusmarkierungen, verständliche Fehlermeldungen und unterstützende Hinweise.
Informationen für eine barrierefreie Formularvalidierung befinden sich in einem weiteren Eintrag.
Zur Formvalidierung
Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.
Der semantische Aufbau eines Formulars ist die Basis für alle weiteren Implementierungen.
Das Formular sollte in einem <form> Element eingebunden sein. HTML bietet zudem viele native Eingabefelder für unterschiedliche Daten zur Eingabe z.B. <input>, <select>, <textarea>.
Formulare sollten ebenfalls einen zugänglichen Namen haben bzw. in einem Kontext stehen, damit Assistive Technologien Informationen bereit stellen können, um was für ein Formular es sich handelt.
Eingabefelder, die thematisch zusammen gehören wie z.B. Radioboxen, sollten gruppiert werden.
Zugehörige Eingabefelder oder Felder, die im gleichen Kontext stehen, sollten mit <fieldset> gruppiert werden. Mit <legend> kann eine Beschreibung des Feldgruppen-Kontexts angegeben werden. Die <legend> muss dabei direkt dem geöffneten <fieldset> folgen.
Alle Eingabefelder sollten ein visuell sichtbares Label bekommen, damit die Nutzer:innen genau wissen, welche Daten im Formularfeld eingegeben werden sollen.
Die Beziehung zwischen Label und Eingabefeld sollte mit dem for Attribut auf dem <label> und einer entsprechenden id-Attribut auf dem Eingabefeld hergestellt werden.
Das Eingabefeld innerhalb eines <label>-Elements zu verschachteln (implizites Labelling), sollte vermieden werden, da sie von bestimmten voice-control Software nicht unterstützt werden.
Um User:innen Hilfestellung zu bieten, wie sie die Formularfelder korrekt ausfüllen können, sollten Instruktionen bereit gestellt werden.
Bei der Beschreibung von Eingabefeldern können Hilfestellungen oder Anforderungen an die Eingabe angegeben werden, zum Beispiel eine minimale Zeichenlänge bei Passwörtern. Separate Elemente wie <p> oder <span> eignen sich dafür besonders gut. Über die ARIA-Attribute aria-labelledby oder aria-describedby können diese Elemente direkt mit dem Eingabefeld verknüpft werden.
Beschreibungen von Formulareingabefeldern sollten nicht über das placeholder-Attribut realisiert werden. Platzhalter sind oft schwer lesbar, haben meist einen schlechten Farbkontrast, verschwinden beim Eingeben von Text und werden nicht automatisch von Hilfstechnologien übersetzt.
Eine Autovervollständigung erleichtert die Eingabe in Formularfeldern, indem sie der/dem Nutzer:in automatisch Vorschläge basierend auf zuvor eingegebenen Daten anbietet.
Mithilfe des autocomplete-Attributs können Formularfelder als häufig vorkommende Eingabefelder ausgezeichnet werden. Dadurch ist es möglich, dass der Browser bereits gespeicherte Daten aus bereits ausgefüllten Formularen abrufen und vorschlagen kann.
Zuletzt aktualisiert am 12.12.25