Warum Formulare so kritisch sind
Formulare sind das Herzstück der digitalen Verwaltung. Hier findet der eigentliche Bürgerservice statt: Anträge werden gestellt, Termine gebucht, Anliegen übermittelt. Wer an einem Formular scheitert, ist von der digitalen Verwaltung ausgeschlossen - egal wie barrierefrei der Rest der Website ist.
Die BITV 2.0 trägt dem Rechnung: Paragraph 3 Absatz 4 fordert, dass "Formulare, interaktive Prozesse und zentrale Einstiegsseiten ein hoechstmögliches Mass an Barrierefreiheit" aufweisen müssen. Das ist keine Kann-Bestimmung, sondern eine explizite Priorisierung.
Das Problem in Zahlen
Eine Analyse der Barrierefreiheitserklärungen deutscher Kommunen zeigt ein wiederkehrendes Muster. Typische Einträge lauten:
- • "Beschriftungen für Formularelemente sind nicht korrekt verknüpft"
- • "Fehlermeldungen werden nicht bei allen Feldern ausgegeben"
- • "Das autocomplete-Attribut fehlt bei persönlichen Daten"
- • "Der Fokusrahmen ist nicht ausreichend sichtbar"
Die 10 häufigsten Formular-Fehler
Fehlende oder falsch verknüpfte Labels
WCAG 1.3.1, 3.3.2
Eingabefelder haben keine Beschriftung, oder die Beschriftung ist nicht technisch mit dem Feld verknüpft. Screenreader lesen nur "Eingabefeld, leer" - der Nutzer weiss nicht, was er eingeben soll.
<!-- FALSCH: Label ohne Verknüpfung -->
<label>Vorname</label>
<input type="text" name="vorname">
<!-- RICHTIG: Label mit for-Attribut -->
<label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname">
Placeholder statt Label
WCAG 3.3.2
Sobald der Nutzer zu tippen beginnt, verschwindet der Placeholder. Der Nutzer kann nicht mehr sehen, was in das Feld gehört. Besonders problematisch bei längeren Formularen.
Unzureichende Fehlermeldungen
WCAG 3.3.1, 3.3.3
Bei Eingabefehlern erscheint nur "Es ist ein Fehler aufgetreten" oder das fehlerhafte Feld wird nur farblich markiert. Der Nutzer weiss nicht, was genau falsch ist.
<!-- RICHTIG: Spezifische Fehlermeldung -->
<input id="plz" aria-describedby="plz-error" aria-invalid="true">
<span id="plz-error" role="alert">
Bitte geben Sie eine gültige 5-stellige Postleitzahl ein.
</span>
Pflichtfelder nur durch Farbe gekennzeichnet
WCAG 1.4.1
Pflichtfelder werden nur durch ein rotes Sternchen gekennzeichnet - ohne zusätzlichen Text oder ARIA-Attribut. Farbenblinde und Screenreader-Nutzer erkennen nicht, welche Felder Pflicht sind.
Keine Tastaturbedienung möglich
WCAG 2.1.1, 2.1.2
Custom-Dropdowns, Datepicker oder Autocomplete-Felder sind nur mit der Maus bedienbar. Nutzer ohne Maus können das Formular nicht ausfüllen.
Fehlender oder unsichtbarer Fokusindikator
WCAG 2.4.7
Der Standard-Fokusrahmen wurde per CSS entfernt (outline: none), ohne eine Alternative anzubieten. Bei Tastaturnavigation ist nicht erkennbar, welches Element fokussiert ist.
/* RICHTIG: Eigenen Fokus-Stil definieren */
input:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
Zeitlimits ohne Verlängerungsmöglichkeit
WCAG 2.2.1
Formulare oder Sessions haben ein Zeitlimit, nach dem die Eingaben verloren gehen - ohne Vorwarnung oder Verlängerungsoption. Nutzer, die langsamer tippen, verlieren ihre Eingaben.
CAPTCHAs ohne barrierefreie Alternative
WCAG 1.1.1
Zum Spam-Schutz wird ein visuelles CAPTCHA eingesetzt, das für Screenreader-Nutzer oder Menschen mit Sehbehinderung nicht lösbar ist. Betroffene Nutzer sind vollständig ausgesperrt.
Fehlende Autocomplete-Attribute
WCAG 1.3.5
Bei Feldern für persönliche Daten fehlen die autocomplete-Attribute. Browser und Passwort-Manager können die Felder nicht automatisch ausfüllen - nachteilig für Nutzer mit motorischen Einschränkungen.
<input type="text" id="name" autocomplete="name">
<input type="email" id="email" autocomplete="email">
<input type="text" id="plz" autocomplete="postal-code">
Unklare Formularstruktur
WCAG 1.3.1, 2.4.6
Lange Formulare haben keine erkennbare Struktur. Zusammengehörige Felder sind nicht gruppiert, Abschnitte nicht beschriftet. Nutzer verlieren den Überblick.
<!-- RICHTIG: fieldset und legend -->
<fieldset>
<legend>Persönliche Daten</legend>
<label for="vorname">Vorname</label>
<input type="text" id="vorname">
</fieldset>
Leichte Sprache in Formularen
Barrierefreie Formulare sind nicht nur technisch korrekt - sie sind auch verständlich. Hier kommt Leichte Sprache ins Spiel.
Das Problem komplexer Formulartexte
"Ich versichere, dass die vorstehenden Angaben der Wahrheit entsprechen und mir bekannt ist, dass unrichtige oder unvollständige Angaben strafrechtlich verfolgt werden können."
In Leichter Sprache:
"Ich habe die Wahrheit geschrieben. Ich weiss: Lügen ist verboten. Lügen kann bestraft werden."
VoxDrop für Formulare
VoxDrop bietet speziell für Formulare zwei hilfreiche Funktionen: Leichte Sprache - Labels, Hilfetexte und Fehlermeldungen werden automatisch vereinfacht. Vorlesefunktion - Formulartexte werden vorgelesen, besonders hilfreich bei langen Erklärungen.
Checkliste für barrierefreie Formulare
Struktur und Beschriftung
- Jedes Eingabefeld hat ein verknüpftes Label
- Placeholder sind Ergänzung, nicht Ersatz für Labels
- Pflichtfelder sind textlich gekennzeichnet
- Zusammengehörige Felder sind mit fieldset/legend gruppiert
- Autocomplete-Attribute sind bei persönlichen Daten gesetzt
Fehlermeldungen
- Fehler werden spezifisch benannt (welches Feld, was ist falsch)
- Fehlermeldungen bieten Lösungshinweise
- Fehler sind programmatisch mit dem Feld verknüpft (aria-describedby)
- Fehlerzustand ist per aria-invalid markiert
Tastaturbedienung
- Alle Elemente sind per Tab erreichbar
- Die Tab-Reihenfolge ist logisch
- Custom-Elemente haben vollständige Tastaturunterstützung
- Es gibt keine Tastaturfallen
Visuelles Design
- Fokusindikator ist deutlich sichtbar
- Textkontrast beträgt mindestens 4,5:1
- Fehlerzustände sind nicht nur durch Farbe erkennbar
Zeitverhalten & Spam-Schutz
- Zeitlimits sind verlängerbar
- Vor Session-Ablauf wird gewarnt
- CAPTCHA hat barrierefreie Alternative
Fazit: Formulare als Schlüssel zur Inklusion
Barrierefreie Formulare sind kein Nice-to-Have - sie sind der Kern der digitalen Verwaltung. Wer hier versagt, schliesst Bürger aus. Wer hier überzeugt, schafft echte digitale Teilhabe.
Die gute Nachricht: Die meisten Fehler sind technisch einfach zu beheben. Label-Verknüpfungen, Fehlermeldungen, Fokusindikatoren - das sind keine Rocket-Science-Themen, sondern solides Handwerk.
Beginnen Sie mit den meistgenutzten Formularen: Kontaktformular, Terminbuchung, die wichtigsten Anträge. Und denken Sie daran: Ein barrierefreies Formular ist auch ein benutzerfreundliches Formular - davon profitieren alle Bürger.