Barrierefreie Formulare – Welche Entscheidungen wirklich zählen

Von Beschriftungen bis Fokusführung: Was Formulare für alle zugänglich macht

Ein Kontaktformular, das sich nicht ausfüllen lässt. Ein Checkout, der bei der Tastaturnavigation abbricht. Eine Fehlermeldung, die niemand versteht. Formulare sind zentrale Schnittstellen digitaler Anwendungen und gleichzeitig eine häufige Barriere im Web.

Wenn ein Formular nicht barrierefrei gestaltet ist, schließt es Menschen aus. Das betrifft nicht nur Nutzer:innen, die auf Screenreader oder Tastaturbedienung angewiesen sind. Auch Menschen mit eingeschränkter Feinmotorik, kognitiven Einschränkungen oder temporären Beeinträchtigungen stoßen auf Hürden. Seit dem 28. Juni 2025 ist die Gestaltung barrierefreier Formulare durch das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Unternehmen verpflichtend. Doch barrierefreie Formulare sind mehr als eine rechtliche Anforderung. Sie können die Nutzererfahrung für alle verbessern, Fehlerquoten reduzieren und Conversion-Raten erhöhen.

Dieser Artikel zeigt, welche Gestaltungsentscheidungen dabei relevant sind. Im Mittelpunkt stehen Beschriftungen, Fehlermeldungen, Fokusführung, Gruppierung und Eingabeunterstützung. Alle Empfehlungen orientieren sich an den Web Content Accessibility Guidelines (WCAG 2.2) und der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0).

‍

Worauf es bei barrierefreien Formularen ankommt

Die Gestaltung barrierefreier Formulare betrifft mehrere Ebenen. Im Folgenden werden die wichtigsten Entscheidungsfelder beschrieben, die bereits in der Konzeption berücksichtigt werden sollten.

Beschriftungen: Klarheit statt Rätselraten

Jedes Eingabefeld benötigt eine eindeutige Beschriftung. Diese muss auch ohne visuellen Kontext verständlich sein. Wenn eine Beschriftung fehlt oder nur visuell erkennbar ist, bleibt unklar, welche Eingabe erwartet wird. Das betrifft nicht nur Screenreader-Nutzer:innen. Auch Menschen, die sich schwer konzentrieren können oder unter Zeitdruck stehen, profitieren von klaren Beschriftungen.

Formulierungen wie „Name" sind mehrdeutig. Besser ist „Vorname" oder „Nachname". Bei Pflichtfeldern reicht das Sternchen allein nicht aus. Eine Legende sollte erklären, dass mit einem Sternchen markierte Felder verpflichtend sind. Placeholder-Texte ersetzen keine Beschriftung. Sie verschwinden bei der Eingabe und sind für assistive Technologien nicht zuverlässig verfügbar.

Die Beschriftung muss programmatisch mit dem Eingabefeld verknüpft sein. So können Screenreader die Beschriftung vorlesen, wenn das Feld fokussiert wird. Diese Verknüpfung erfolgt über HTML-Strukturen, die für Entwickler:innen umsetzbar sind, aber bereits in der Konzeption mitgedacht werden sollten.

Fehlermeldungen: Konkret statt frustrierend

Fehlermeldungen müssen verständlich sein und konkret benennen, was falsch ist. Eine Meldung wie „Ungültige Eingabe" hilft nicht weiter. Besser ist „Die E-Mail-Adresse muss ein @-Zeichen enthalten". Fehlermeldungen sollten direkt beim betroffenen Eingabefeld erscheinen, nicht nur am Anfang oder Ende des Formulars. So können Nutzer:innen den Fehler schnell finden und korrigieren.

Fehlermeldungen sollten nicht nur auf Farbe basieren. Rot allein reicht nicht aus, um einen Fehler zu kennzeichnen. Zusätzlich sollte ein Icon, ein Text oder eine andere visuelle Markierung verwendet werden. Das hilft Menschen mit Farbfehlsichtigkeit, aber auch allen anderen, die Formulare unter ungünstigen Lichtverhältnissen oder auf kleinen Bildschirmen ausfüllen.

Screenreader müssen Fehlermeldungen automatisch vorlesen können. Dies wird durch technische Attribute erreicht, die in der Entwicklung umgesetzt werden. Die Entscheidung, welche Fehlermeldung wann und wo erscheint, ist jedoch eine Gestaltungsentscheidung, die bereits im UX-Konzept getroffen werden sollte.

Fokusführung: Orientierung beim Navigieren

Die Fokusreihenfolge muss der visuellen und inhaltlichen Struktur des Formulars folgen. Nutzer:innen, die mit der Tastatur navigieren, erwarten, dass der Fokus von oben nach unten und von links nach rechts wandert. Sprünge oder unerwartete Reihenfolgen erschweren die Bedienung und führen zu Abbrüchen.

Der Fokus muss jederzeit sichtbar sein. Ein dünner, kaum erkennbarer Rahmen reicht nicht aus. Der Fokusindikator sollte einen ausreichenden Kontrast zum Hintergrund haben und deutlich erkennbar sein. Das ist nicht nur für Tastaturnutzer:innen relevant. Auch Menschen mit eingeschränktem Sehvermögen oder kognitiven Einschränkungen profitieren von einer klaren Fokusführung.

Kontextänderungen dürfen nicht allein durch das Fokussieren eines Elements ausgelöst werden. Wenn ein Dropdown-Menü automatisch eine neue Seite lädt, sobald es fokussiert wird, ist dies eine Barriere. Nutzer:innen sollten bewusst entscheiden können, wann eine Aktion ausgeführt wird.

Gruppierung: Struktur für komplexe Formulare

Formulare mit vielen Eingabefeldern sollten in logische Abschnitte gegliedert werden. Diese Struktur hilft allen Nutzer:innen, sich zu orientieren und den Überblick zu behalten. Besonders wichtig ist dies bei Radiobuttons und Checkboxen. Ohne klare Gruppierung ist für Screenreader-Nutzer:innen nicht erkennbar, welche Optionen zu welcher Frage gehören.

Ein Beispiel: Die Frage „Wie möchten Sie kontaktiert werden?" sollte klar mit den Optionen „E-Mail", „Telefon" und „Post" verbunden sein. Diese Verbindung erfolgt über HTML-Strukturen, die in der Entwicklung umgesetzt werden. Die Entscheidung, welche Felder gruppiert werden und wie die Gruppierung beschriftet wird, ist jedoch eine konzeptionelle Aufgabe.

Mehrseitige Formulare sollten eine Fortschrittsanzeige enthalten. Diese zeigt, auf welcher Seite sich die Nutzer:innen befinden und wie viele Schritte noch folgen. Die Fortschrittsanzeige sollte auch für Screenreader zugänglich sein, damit alle Nutzer:innen nachvollziehen können, wie weit sie im Prozess sind.

Eingabeunterstützung: Erleichterung statt Hürden

Eingabefelder sollten den erwarteten Eingabetyp klar machen. Auf mobilen Geräten wird dann automatisch die passende Tastatur angezeigt. Das erleichtert die Eingabe und reduziert Fehler. Auch die Autovervollständigung kann Nutzer:innen das Ausfüllen erleichtern. Browser können gespeicherte Daten automatisch einfügen, wenn die Felder entsprechend gekennzeichnet sind.

Hilfestellungen sollten vor dem Eingabefeld oder direkt daneben platziert werden. Wenn eine bestimmte Formatierung erwartet wird, sollte dies vorab erklärt werden. Ein Beispiel: „Bitte geben Sie Ihre Telefonnummer im Format +49 123 456789 ein". Diese Hilfe sollte für alle Nutzer:innen sichtbar und für Screenreader zugänglich sein.

Redundante Eingaben sollten vermieden werden. Informationen, die bereits in derselben Sitzung eingegeben wurden, sollten nicht erneut abgefragt werden. Ausnahmen gelten, wenn die erneute Eingabe aus Sicherheitsgründen notwendig ist, etwa bei der Passwortbestätigung.

Tastaturbedienung: Vollständig und ohne Umwege

Alle Formularelemente müssen vollständig mit der Tastatur bedienbar sein. Das betrifft Eingabefelder, Buttons, Dropdowns, Datepicker und alle interaktiven Elemente. Die grundlegende Tastatursteuerung sollte intuitiv sein:

• Tab-Taste: bewegt den Fokus von einem Element zum nächsten
• Eingabetaste: sendet Formulare ab oder löst Aktionen aus
• Leertaste: aktiviert Checkboxen und Radiobuttons
• Pfeiltasten: navigieren in Dropdown-Menüs und Datepickern

Tastaturfallen müssen vermieden werden. Eine Tastaturfalle entsteht, wenn der Fokus in einem Element gefangen ist und nicht mehr verlassen werden kann. Das kann passieren, wenn modale Dialoge oder Overlays nicht korrekt implementiert sind. Nutzer:innen sollten jederzeit die Möglichkeit haben, ein Element zu verlassen und zur vorherigen Position zurückzukehren.

Tastatur-Kurzbefehle aus einem einzelnen Zeichen sollten abschaltbar oder anpassbar sein. Andernfalls können Nutzer:innen, die Spracheingabe verwenden, versehentlich Funktionen auslösen.

Fehlervermeidung: Prüfen, bestätigen, korrigieren

Bei Formularen mit rechtlichen oder finanziellen Folgen sollten Nutzer:innen Eingaben vor dem Absenden überprüfen können. Dafür gibt es mehrere Möglichkeiten:

• Eingaben können rückgängig gemacht werden
• Eingaben werden vor dem Absenden geprüft
• Eine Bestätigungsseite ermöglicht die Korrektur

Eine Zusammenfassung vor dem Absenden hilft, Fehler zu vermeiden. Sie sollte alle eingegebenen Daten übersichtlich darstellen und die Möglichkeit bieten, einzelne Felder zu bearbeiten. Das reduziert Frustration und erhöht die Wahrscheinlichkeit, dass Nutzer:innen das Formular erfolgreich abschließen.

Automatische Korrekturen sollten transparent sein. Nutzer:innen sollten die Möglichkeit haben, Korrekturen zu überprüfen und gegebenenfalls rückgängig zu machen. Das ist besonders wichtig bei Namen, Adressen oder anderen persönlichen Daten, die nicht automatisch korrigiert werden sollten.

Authentifizierung: Zugänglich und sicher

Authentifizierungsprozesse sollten nicht auf kognitive Funktionstests angewiesen sein. CAPTCHAs, die verlangen, verzerrte Buchstaben zu erkennen oder Objekte in Bildern zu identifizieren, sind für viele Menschen nicht zugänglich. Bildbasierte CAPTCHAs sind für blinde Nutzer:innen nicht nutzbar. Eine Audio-Alternative sollte bereitgestellt werden. Noch besser sind moderne Verfahren, die ohne Nutzerinteraktion auskommen.

Passwortfelder sollten die Möglichkeit bieten, das Passwort anzuzeigen. Ein Button „Passwort anzeigen" reduziert Eingabefehler und erleichtert die Bedienung. Das ist besonders hilfreich für Menschen mit motorischen Einschränkungen oder kognitiven Beeinträchtigungen, aber auch für alle anderen, die sich bei der Eingabe unsicher sind.

‍

Normen und Standards

Die Gestaltung barrierefreier Formulare orientiert sich an den Web Content Accessibility Guidelines und der Barrierefreie-Informationstechnik-Verordnung. Diese Standards definieren konkrete Anforderungen, die in der Umsetzung berücksichtigt werden müssen.

WCAG 2.2 fordert unter anderem, dass Beschriftungen bereitgestellt werden, wenn Inhalte Nutzereingaben erfordern, dass Fehler automatisch erkannt und beschrieben werden und dass alle Funktionen über die Tastatur verfügbar sind. BITV 2.0 konkretisiert diese Anforderungen für den deutschen Rechtsraum und verlangt beispielsweise, dass Beschriftungen von Formularelementen programmatisch ermittelbar sind.

Die Einhaltung dieser Standards ist seit dem 28. Juni 2025 durch das BFSG für viele Unternehmen verpflichtend. Die Standards bieten jedoch nicht nur rechtliche Orientierung. Sie helfen auch dabei, Gestaltungsentscheidungen nachvollziehbar zu begründen und Prioritäten zu setzen.

‍

UseTree und barrierefreie Formulare

UseTree unterstützt Unternehmen bei der Gestaltung barrierefreier digitaler Produkte. Wir prüfen Formulare auf Konformität mit WCAG 2.2 und BITV 2.0, entwickeln Konzepte für barrierefreie Eingabeprozesse und begleiten Teams bei der Umsetzung. Wir verbinden UX-Research mit Accessibility-Standards und stellen sicher, dass Formulare nicht nur normkonform, sondern auch nutzbar sind.

‍

Fazit

Barrierefreie Formulare verbessern die Nutzererfahrung für alle. Eindeutige Beschriftungen, klare Fehlermeldungen, sichtbare Fokusführung, logische Gruppierung und durchdachte Eingabeunterstützung machen Formulare zugänglich. Die Einhaltung von WCAG 2.2 und BITV 2.0 ist seit dem 28. Juni 2025 durch das BFSG für viele Unternehmen verpflichtend. Wer Barrierefreiheit früh im UX-Prozess berücksichtigt, schafft eine bessere Grundlage für fundierte Designentscheidungen und kann das Risiko umfangreicher Nacharbeiten reduzieren.