Barrierefreie Online-Formulare: Checkliste nach WCAG 2.2 und BITV 2.0

Warum Formulare so oft scheitern

Die Studie WebAIM Million hat im Februar 2026 die Startseiten von einer Million Websites automatisch geprüft. Fehlende Beschriftungen von Formularfeldern gab es auf 51 Prozent der Seiten, ein Drittel aller Eingabefelder (33,1 Prozent) war nicht korrekt beschriftet. Zu wenig Kontrast fand die Studie auf 83,9 Prozent der Seiten (WebAIM Million 2026).

Bei einem Antrag wiegt jede Barriere schwerer als auf einer Infoseite: Wer ein Pflichtfeld nicht ausfüllen kann, kann den ganzen Antrag nicht absenden. In unserer Demo zur Barrierefreiheit sehen Sie typische Fehler an einem erfundenen Bestellformular: blasse Schrift, nur Platzhalter, ein div als Knopf, kein Fokusrahmen, Fehler nur in Rot. Daneben steht dieselbe Seite korrigiert.

Welche Regeln gelten

Welche Pflicht für Ihr Formular gilt, lassen Sie im Einzelfall rechtlich prüfen. Technisch ist WCAG 2.2 Stufe AA ein guter Maßstab, weil sie WCAG 2.1 einschließt.

• WCAG 2.2: die Richtlinien des W3C, aktuelle Fassung vom 12. Dezember 2024 (W3C). Inhalte, die WCAG 2.2 erfüllen, erfüllen laut W3C auch WCAG 2.0 und 2.1.
• BITV 2.0: gilt für öffentliche Stellen des Bundes und verweist auf die harmonisierten Normen, also die EN 301 549 (§ 3 BITV 2.0). Für Formulare soll ausdrücklich ein „höchstmögliches Maß an Barrierefreiheit“ angestrebt werden (§ 3 Abs. 4). Dazu kommen Erläuterungen in Leichter Sprache und Gebärdensprache (§ 4) und die Erklärung zur Barrierefreiheit (§ 7). Für Stellen der Länder und Kommunen gilt Landesrecht.
• EN 301 549: Die geltende Fassung V3.2.1 beruht auf WCAG 2.1. Die Fassung V4.1.1 übernimmt WCAG 2.2 und wurde am 2. September 2026 veröffentlicht. Maßgeblich wird sie, sobald die EU-Kommission sie im Amtsblatt nennt; die irische National Disability Authority erwartet das für Dezember 2026 (NDA).
• BFSG: Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher, darunter Dienstleistungen im elektronischen Geschäftsverkehr (§ 1 BFSG). Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen (§ 3 Abs. 3 BFSG). Überblicke geben die Bundesfachstelle Barrierefreiheit und das BMAS.

Beschriftung und Hilfetexte

• Jedes Feld hat eine sichtbare Beschriftung, die im Code mit dem Feld verbunden ist (label-Element). Platzhalter verschwinden beim Tippen und ersetzen keine Beschriftung. 1.3.1, 3.3.2
• Zusammengehörige Auswahlfelder, etwa Ja und Nein oder eine Liste von Rechtsformen, stehen in einer Gruppe mit eigener Überschrift (fieldset und legend). 1.3.1
• Pflichtfelder sind im Text gekennzeichnet, nicht nur durch Farbe, und am Anfang des Formulars erklärt. 3.3.2, 1.4.1
• Formate stehen vor der Eingabe dabei, zum Beispiel „TT.MM.JJJJ“ oder „Betrag in Euro, ohne Cent“. 3.3.2
• Felder für Name, E-Mail, Anschrift und Telefon tragen das passende autocomplete-Attribut, damit der Browser sie ausfüllen kann. 1.3.5
• Der sichtbare Text eines Felds oder Knopfs steckt auch in seinem zugänglichen Namen, damit Sprachsteuerung funktioniert. 2.5.3
• Überschriften und Beschriftungen beschreiben Thema oder Zweck. 2.4.6

Fehlermeldungen

• Fehler werden im Text benannt, am Feld angezeigt und mit dem Feld verbunden, nicht nur rot umrandet. 3.3.1, 1.4.1
• Die Meldung sagt, wie es richtig geht: „Bitte ein Datum nach dem Projektbeginn eingeben“ statt „Ungültige Eingabe“. 3.3.3
• Nach einem Absendeversuch mit Fehlern steht oben eine Liste der Fehler mit Verweis auf die Felder. So empfiehlt es das W3C (Form Notifications).
• Statusmeldungen wie „Datei hochgeladen“ oder „3 Fehler gefunden“ werden vom Screenreader angesagt, ohne dass der Fokus springt. 4.1.3
• Bei Anträgen mit rechtlicher oder finanzieller Wirkung können Antragstellende vor dem Absenden alles prüfen und korrigieren, zum Beispiel in einer Prüfübersicht. 3.3.4

Tastatur, Fokus und Darstellung

• Alles geht mit der Tastatur: Felder, Auswahl, Upload, Hilfe und Absenden. 2.1.1 Es gibt keine Stelle, aus der man nicht wieder herauskommt. 2.1.2
• Die Reihenfolge beim Tabben folgt der sichtbaren Reihenfolge. 2.4.3
• Der Fokus ist immer sichtbar, der Fokusrahmen hat genug Kontrast. 2.4.7, 1.4.11
• Eine Auswahl löst keinen ungefragten Seitenwechsel und kein Absenden aus. 3.2.2
• Eigene Bedienelemente haben Rolle, Name und Zustand, die ein Screenreader ansagen kann. Ein div ist kein Knopf. 4.1.2
• Text hat mindestens 4,5 zu 1 Kontrast, Feldrahmen und Fokusrahmen mindestens 3 zu 1. 1.4.3, 1.4.11
• Das Formular funktioniert bei 200 Prozent Textgröße und bei 320 CSS-Pixeln Breite ohne seitliches Scrollen. 1.4.4, 1.4.10

Zeitlimits, Speichern und Anmeldung

• Läuft eine Sitzung nach einer bestimmten Zeit ab, lässt sie sich verlängern: mit Warnung vorher und mindestens 20 Sekunden, um mit einer einfachen Aktion zu verlängern. 2.2.1 Das W3C rät, bei mehrteiligen Formularen möglichst gar kein Zeitlimit zu setzen (Multi-page Forms).
• Lange Anträge brauchen einen Weg, Eingaben nicht zu verlieren. In unserer Antragsstrecke bleibt der Entwurf während der Browsersitzung erhalten. Speichern und späteres Fortsetzen per Link oder Konto bauen wir bei Bedarf.
• Angaben, die im selben Ablauf schon gemacht wurden, werden übernommen oder zur Auswahl angeboten, statt sie erneut zu verlangen. 3.3.7
• Die Anmeldung verlangt keinen Gedächtnistest: Einfügen in Passwort- und Codefelder ist erlaubt, Passwortmanager funktionieren. 3.3.8

Neu in WCAG 2.2: was Formulare betrifft

WCAG 2.2 hat neun neue Kriterien, sechs davon in den Stufen A und AA. Alle sechs können Formulare betreffen. Das Kriterium 4.1.1 Parsing ist entfallen (W3C, What's New in WCAG 2.2).

Anlagen und PDF-Kopie

• Erlaubte Formate, Größe und Zahl der Dateien stehen vor dem Upload, Fehler beim Hochladen werden im Text gemeldet. 3.3.2, 3.3.1
• Hochgeladene Dateien erscheinen als Liste mit Namen, Entfernen geht auch mit der Tastatur.
• Bekommen Antragstellende eine PDF-Kopie, prüfen Sie auch diese: Hat sie Struktur, Überschriften und eine sinnvolle Lesereihenfolge? Die Bundesfachstelle verweist für Dokumente auf Abschnitt 10 der EN 301 549 (FAQ der Bundesfachstelle).

Testen mit Werkzeug und Screenreader

Automatische Prüfer sind ein guter Anfang, aber nicht mehr. Das W3C schreibt, dass Werkzeuge nicht alle Aspekte der Barrierefreiheit automatisch prüfen können und menschliches Urteil nötig ist (W3C, Evaluation Tools). Für einen ersten eigenen Durchgang eignen sich die Easy Checks des W3C.

1. 1Automatischer Prüfer: findet fehlende Beschriftungen, Kontrastfehler und fehlende Rollen. Der Prüfer in unserer Demo prüft 14 Kriterien direkt im Browser und nennt zu jedem Befund das WCAG-Kriterium.
2. 2Tastatur: Maus weglegen und das ganze Formular mit Tab, Umschalt und Tab, Leertaste und Eingabetaste ausfüllen und absenden. Ist der Fokus immer zu sehen?
3. 3Vergrößerung: Browser auf 200 und 400 Prozent zoomen. Bleibt alles lesbar und bedienbar?
4. 4Screenreader: mit NVDA unter Windows (kostenlos) oder mit VoiceOver auf Mac und iPhone. Werden Beschriftung, Pflichtangabe, Fehler und Status angesagt?
5. 5Fehlerfall: absichtlich falsch ausfüllen. Versteht man ohne Farbe, was zu tun ist?
6. 6Menschen aus der Zielgruppe: wenn möglich auch Menschen mit Behinderungen testen lassen.

Kurzcheckliste zum Abhaken

Öffentliche Stellen brauchen zusätzlich eine Erklärung zur Barrierefreiheit mit einem Weg, Barrieren zu melden (§ 7 BITV 2.0).

• Jedes Feld hat eine sichtbare, im Code verbundene Beschriftung.
• Auswahlgruppen haben eine Überschrift (fieldset, legend).
• Pflichtfelder und Formate sind im Text erklärt.
• Persönliche Angaben haben autocomplete.
• Fehler stehen im Text am Feld und schlagen eine Lösung vor, nicht nur in Rot.
• Statusmeldungen werden angesagt.
• Vor dem Absenden gibt es eine Prüfübersicht.
• Alles ist per Tastatur bedienbar, in sinnvoller Reihenfolge.
• Der Fokus ist sichtbar und wird nicht verdeckt.
• Kontrast 4,5 zu 1 für Text, 3 zu 1 für Rahmen und Fokus.
• Klickflächen mindestens 24 mal 24 CSS-Pixel oder mit Abstand.
• Upload geht auch ohne Ziehen.
• Zeitlimits lassen sich verlängern, besser gibt es keine.
• Nichts wird im selben Ablauf doppelt abgefragt.
• Anmeldung ohne Gedächtnistest, Einfügen erlaubt.
• Hilfe steht in jedem Schritt an derselben Stelle.
• Das Formular funktioniert bei 320 CSS-Pixeln Breite.
• Getestet mit Tastatur und Screenreader.

Wenn Sie Unterstützung möchten

Wir prüfen Formulare nach WCAG 2.2 und BITV 2.0 und setzen die Maßnahmen um, siehe Barrierefreiheit prüfen und umsetzen. Unsere Online-Anträge entwickeln wir von Anfang an nach WCAG 2.2 Stufe AA, auch für Stiftungen und Förderprogramme. Wer ein PDF-Formular ablösen will, findet den Weg im Ratgeber Vom PDF-Formular zum Online-Antrag und auf der Seite Formulare digitalisieren lassen. Für ganze Verfahren gibt es den Leitfaden Antragsverfahren digitalisieren.