Gestalten barrierefrei Formen: Beste praktiken für UX & compliance

Formulare finden sich überall. Von Anmeldeseiten über Checkout-Prozesse bis hin zu Umfragen - Formulare können schwer zu bedienen sein und führen oft zu Frustration oder gar Abbrüchen bei vielen Nutzer:innen. Barrierefreie Formulare könnten das ändern. 

Sie schaffen eine andere Nutzererfahrung und ermöglichen es allen Menschen (einschließlich Menschen mit Behinderungen), Aufgaben effizient und selbstbewusst zu erledigen.

Barrierefreie Formulare sind nicht nur ethisch - sie sind gutes Design. Sie sorgen für eine bessere Nutzererfahrung, geringere Fehlerraten, höhere Conversion Rates und helfen bei der Einhaltung von Barrierefreiheitsgesetzen wie WCAG und ADA.

In diesem Leitfaden vermitteln wir dir das Wissen, um intuitive, inklusive und gesetzeskonforme Formulare zu gestalten - mit praktischen Tipps, Codebeispielen und Checklisten, um Formulare zu erstellen, die für alle Nutzer:innen funktionieren.

Los geht’s!

Formulare barrierefrei verstehen

Wenn wir von barrierefreien Formularen sprechen, meinen wir, dass sie für alle Menschen nutzbar sein sollen – unabhängig von Fähigkeiten, Geräten oder Kontext. 

Ein barrierefreies Formular bedeutet nicht, dass es nur für Menschen mit Behinderungen nutzbar ist, sondern dass es für alle Nutzer:innen klarer und einfacher wird.

Wer profitiert von barrierefreien Formularen?

• Menschen, die blind oder sehbehindert sind, Screenreader nutzen oder einen starken Farbkontrast benötigen.
• Menschen mit motorischen Einschränkungen, die per Tastatur statt mit der Maus navigieren.
• Personen mit kognitiven oder Lernbehinderungen profitieren von klaren Beschriftungen und verständlichen Fehlermeldungen.
• Ältere Erwachsene mit Seh-, Hör- oder Bewegungseinschränkungen.

Relevante Barrierefreiheitsstandards

Es gibt eine Vielzahl an Richtlinien und Gesetzen, die festlegen, wie Formulare barrierefrei gestaltet sein müssen:

• WCAG 2.2 (Web Content Accessibility Guidelines) – Der globale Standard für digitale Barrierefreiheit.
• Section 508 (USA) – Verpflichtet US-Behörden zur barrierefreien Gestaltung digitaler Inhalte.
• ADA (Americans with Disabilities Act) – Gewährleistet den gleichberechtigten Zugang zu Online-Diensten in den USA.
• EN 301 549 (EU) – Anforderungen an die Barrierefreiheit aller europäischen IKT-Produkte und -Dienstleistungen.

Barrierefreiheit vs. Usability

Beachte den Unterschied:

• Barrierefreiheit ermöglicht Menschen mit Behinderungen die Interaktion mit deinem Formular.
• Usability sorgt für eine effiziente und angenehme Nutzung für alle.

Ein barrierefreies und inklusives Formular bietet beides.

Grundprinzipien barrierefreier Formular-Gestaltung

There are a few fundamental principles behind accessible form design. These principles inform how labels, instructions, navigation, and visual design should be combined so users can fill out the form without confusion or barriers. 

1. Clear Labeling

• Every field should have a label that defines the required information.
• Link the label to the input with the for and id attributes so screen readers can read both together.

Example of good practice:
   <label for="email">Email address</label>
   <input type="email" id="email" name="email" required>

• Do not use placeholder text as the only label; once the user clicks into the field, the label is gone. 

2. Hilfreiche Anleitungen

• Wenn Anleitungen nötig sind, halte sie einfach und klar. Besonders bei Pflichtfeldern oder speziellen Eingabeformaten (z. B. „Passwörter müssen mindestens acht Zeichen enthalten“).
• Platziere sie direkt neben dem entsprechenden Feld, damit sie nicht übersehen werden.

3. Barrierefreie Fehlermeldungen

• Verwende konkrete Fehlermeldungen wie „Bitte gib eine gültige E-Mail-Adresse ein“ statt unklaren Aussagen wie „Ungültige Eingabe“.
• Fehler sollten per Screenreader angekündigt werden – z. B. mit ARIA-Attributen wie aria-describedby oder Live-Regionen.
• Fehler können direkt beim Ausfüllen angezeigt oder beim Absenden in einer Zusammenfassung präsentiert werden.

4. Reibungslose Tastaturnavigation

• Tastaturnutzer:innen müssen alle Formularelemente erreichen und bedienen können.
• Nutze eine logische Tab-Reihenfolge, die der visuellen Struktur des Formulars entspricht.
• Sorge für sichtbare Fokus-Anzeigen, damit Nutzer:innen wissen, wo sie sich befinden.

5. Durchdachtes Fokus-Management

• Bei einem Fehler sollte der Fokus auf das erste fehlerhafte Feld gelenkt oder eine übersichtliche Fehlermeldung oben im Formular angezeigt werden.
• Bei mehrstufigen Formularen sicherstellen, dass der Fokus ohne „Fallen“ auf den nächsten Abschnitt wechseln kann.

6. Logische Gruppierung

• Verwende <fieldset> und <legend>, um verwandte Eingaben logisch zu gruppieren (z. B. eine Radio-Button-Gruppe für „Zahlungsmethode“).
• Das gibt Screenreadern Kontext und erleichtert das Verständnis von zusammengehörenden Feldern.

7. Gestalterische Aspekte

• Sorge für ausreichenden Kontrast zwischen Text, Eingaben und Hintergrund (mindestens 4,5:1 bei normalem Text gemäß WCAG).
• Nutze nicht nur Farben, um Fehler oder Pflichtfelder zu kennzeichnen – ergänze Symbole oder Text.
• Genügend Weißraum um Buttons und Eingabefelder hilft besonders auf Mobilgeräten bei der Bedienung.

Technische Umsetzung barrierefreier Formulare

Designrichtlinien sind eine gute Grundlage, aber die technische Umsetzung entscheidet über die tatsächliche Nutzbarkeit. Mit semantischem HTML, durchdachtem Einsatz von ARIA und korrekter Validierung stellen wir sicher, dass Formulare mit unterstützenden Technologien funktionieren.

1. HTML Best Practices

• Nutze semantische Elemente: <form>, <label>, <fieldset>, <legend>, <input> statt generischer <div>s.
• Setze korrekte Input-Typen (email, number, tel, date), damit Nutzer:innen passende Tastaturen und Hilfsmittel nutzen können.
• Verwende required, um Pflichtfelder zu markieren, und kennzeichne optional Felder klar.
• Beispiel:

<form>
<label for="phone">Phone number (optional)</label>
<input type="tel" id="phone" name="phone">
</form>

2. ARIA (Accessible Rich Internet Applications)

• Verwende ARIA nur, wenn semantisches HTML nicht ausreicht.
• Häufige Attribute:
  • aria-required="true" für Pflichtfelder
  • aria-invalid="true" bei fehlerhaften Eingaben
  • aria-describedby="error-msg" zur Verknüpfung mit einer Fehlermeldung
• Vermeiden Sie die übermäßige Verwendung von ARIA, da es bei falscher Anwendung verwirrend sein kann..
• Beispiel mit ARIA::

<label for="username">Username</label>
<input type="text" id="username" name="username" aria-required="true" aria-describedby="username-help">
<span id="username-help">Choose a unique username, at least 6 characters long.</span>

3. Formularvalidierung

• Serverseitige Validierung ist essenziell, da Skripte clientseitig deaktiviert sein könnten.
• Verwende HTML5-Validierung (required, pattern, type), wo möglich.
• Bei Validierung mit JavaScript sollten Fehler in einer ARIA-Live-Region angekündigt werden.

Beispiel mit Live-Region:

<div aria-live="polite" id="error-summary"></div>

4. Autocomplete and Autocapitalize

• Die Verwendung der Autovervollständigung soll Benutzern dabei helfen, häufige Felder schneller auszufüllen (z. B. autocomplete="email" oder autocomplete="street-address").
• Dies hilft, Zeit zu sparen und verringert die Wahrscheinlichkeit von Tippfehlern, insbesondere auf Mobilgeräten.
• Beispiel:

<label for="address">Street Address</label>
<input type="text" id="address" name="address" autocomplete="street-address">

5. React und Front-End-Frameworks

• Bei React und anderen Frameworks sicherstellen, dass kontrollierte Komponenten die richtigen Beziehungs-IDs ausgeben.
• Fokuswechsel manuell steuern – insbesondere in Single-Page-Apps nach dem Absenden oder bei Fehlern.
• Bibliotheken wie Formik und Yup können mit ARIA und eigener Fehlerbehandlung zur Barrierefreiheit beitragen.

Barrierefreie Formulare testen

Selbst ein gut aufgebautes Formular ist wertlos, wenn es nicht getestet wurde. Barrierefreiheitstests beinhalten manuelle und automatisierte Prüfungen.

1. Automatisierte Test-Tools

• Lighthouse (in Chrome Dev Tools): Schnelle Checks zu Farbkontrast, Labels und Elementen.
• axe (Deque): Erweiterung, die Seiten umfassend auf Barrierefreiheit prüft.
• WAVE (WebAIM): Hebt Fehler direkt auf der Seite hervor.
• Deque WorldSpace / axe DevTools Pro: Enterprise-Tool für Teams.

Automatisierte Tools finden fehlende Labels, Kontrastprobleme oder falsche ARIA-Nutzung – sie decken etwa 30–40 % der Probleme auf. Manuelle Tests sind trotzdem unerlässlich.

2. Manuelle Tests

• Nur-Tastatur-Test: Formular komplett ohne Maus ausfüllen. Lässt sich alles erreichen, ist der Fokus sichtbar und kann das Formular abgeschickt werden?
• Screenreader-Test: Tools wie NVDA, JAWS oder VoiceOver nutzen. Wird alles korrekt vorgelesen – Labels, Anleitungen, Fehler?
• Mobile-Test: Native Screenreader wie TalkBack (Android) oder VoiceOver (iOS) einsetzen, um mobile Bedienbarkeit zu prüfen.

3. Checklisten und Audits

• Nutze eine Checkliste mit den wichtigsten Anforderungen: Labels, Gruppierungen, Fehlerbehandlung, Fokus, Tastaturzugang.
• Bestehende Formulare regelmäßig prüfen – besonders nach Design- oder Codeänderungen.
• Eine Checkliste zum Herunterladen kann Teams in Design und Entwicklung helfen, konsistent zu bleiben.

WCAG-Zuordnung und gesetzliche Vorgaben

Barrierefreie Formulare bieten nicht nur bessere UX – sie helfen auch, geltende Standards und Gesetze einzuhalten. Der international anerkannte Standard sind die Web Content Accessibility Guidelines (WCAG), auf die sich viele nationale Gesetze direkt beziehen.

Häufige WCAG-Zuordnungen für Formulare:

• Labels → [WCAG 4.1.2: Name, Role, Value]
  Jedes Feld benötigt ein maschinenlesbares Label, damit Screenreader es korrekt ankündigen.
• Fehleridentifikation → [WCAG 3.3.1: Error Identification]
  Bei falschen Eingaben müssen Fehlertexte erscheinen.
• Anleitungen → [WCAG 3.3.2: Labels or Instructions]
  Nutzer:innen müssen wissen, wie ein Feld auszufüllen ist (z. B. Datumsformat).
• Fokusreihenfolge → [WCAG 2.4.3: Focus Order]
  Tastaturnavigation muss in logischer, visueller Reihenfolge möglich sein.

Regionale gesetzliche Rahmen:

Vereinigte Staaten

• ADA (Americans with Disabilities Act) wird zunehmend auf Websites angewandt.
• Section 508 verpflichtet Bundes- und Landesbehörden zu digitaler Barrierefreiheit.

Europäische Union

• EU Accessibility Act und EN 301 549 gelten für IKT-Produkte und -Dienste (inkl. Webformulare).

Vereinigtes Königreich

• Public Sector Bodies Accessibility Regulations verpflichten öffentliche Webseiten und Apps zur Einhaltung von WCAG 2.1 AA.

Fazit

Barrierefreie Formulare sind gesetzeskonform und bieten eine bessere Nutzererfahrung. Klare Labels und Anleitungen, logische Fokusführung und barrierefreie Fehlermeldungen machen Formulare einfacher auszufüllen und erhöhen die Erfolgschancen.

Das Beste: Barrierefreiheit muss nicht kompliziert sein. Mit Best Practices, semantischem HTML und echten Tests mit Nutzer:innen und Hilfsmitteln kannst du Formulare erstellen, die barrierefrei sind, Standards erfüllen und deinen Nutzer:innen den Weg erleichtern.

Zum Einstieg kannst du deine Seite mit einem kostenlosen Barrierefreiheits-Checker prüfen. Das gibt dir einen schnellen Überblick über häufige Probleme und hilft dir, Formulare sofort zu verbessern.