Barrierefreie Formulare erstellen: Ein Leitfaden für 2025

Du willst wissen, wie du deine Formulare BFSG-konform gestaltest, ohne dass es kompliziert wird? In diesem Leitfaden zeige ich dir die 6 Grundprinzipien barrierefreier Formulare und wie du sie Schritt für Schritt umsetzt.

Wieso sind gerade Formulare kritisch, wenn es um Barrierefreiheit geht??

Du willst schnell was bestellen, aber das Formular macht Probleme. Fehlermeldungen tauchen irgendwo auf und du weißt nicht, was eigentlich schief gelaufen ist.

Das nervt nicht nur Menschen mit Behinderungen. Wer schon mal mit ADHS oder nach einem langen Arbeitstag versucht hat, ein kompliziertes Formular auszufüllen, weiß: Irgendwann gibt man genervt auf.

Seit 2025 ist das auch rechtlich relevant – das BFSG macht barrierefreie Formulare zur Pflicht. Aber mal ehrlich: Auch ohne Gesetz verlierst du jeden Tag Kunden an schlecht gemachte Formulare. Wie Barrierefreiheit zur echten Business-Chance wird, erkläre ich ausführlich in diesem Artikel: Inklusive UX & Barrierefreiheit in SaaS.

Die 6 Grundprinzipien barrierefreier Formulare 

Diese 6 Prinzipien machen barrierefreie Formulare aus, die wirklich alle bedienen können:

1. Logische Reihenfolge und Navigation

Wie im echten Leben gehst du im Formular von einfach zu komplex. Erst die Basics (Name, E-Mail), dann die Details. Verwende ein einspaltiges Layout – außer bei Feldern, die inhaltlich zusammengehören wie Vor- und Nachname.

Nutze Auszeichnungen wie fieldset und legend für Sektionen. Das ist wie die Beschilderung im Gebäude:

• "Erdgeschoss: Persönliche Daten"

• "Erster Stock: Zahlungsinformationen".

2. Vollständige Tastaturbedienung

Manche Nutzer haben keine Maus, oder können diese nicht nutzen. Die Navigation muss also komplett mit der Tastatur funktionieren, um barrierefreie Formularelemente zu gewährleisten. Das kannst du ganz einfach selbst testen. Wichtig is dabei, dass fokussierte Element eindeutig sichtbar sind – mindestens 2px Rahmen mit 3:1 Kontrast.

• Tab/Shift+Tab zum Vor- und Zurückspringen

• Enter zum Absenden des Formulars

• Escape zum Abbrechen

3. Screenreader-Kompatibilität

Screenreader sind Programme, die Websites vorlesen. Damit sie richtig funktionieren, musst du die richtigen HTML-Bausteine verwenden.

Das bedeutet konkret:

• Verwende echte Buttons statt DIVs mit onclick-Events.

• Schreibe Labels vollständig aus: "E-Mail-Adresse" statt nur "E-Mail". Auch wenn jemand nur das Label hört, muss es verständlich sein.

• Bei der Schriftauswahl für deine Labels hilft dir mein Artikel über lesbare, barrierefreie Schriftarten.
  
  

Die wichtigsten Techniken:

• Semantisches HTML - Die richtigen HTML-Elemente verwenden (z.B. <label>, <fieldset>, <legend>, <input>, <button>)

• ARIA-Attribute - Zusätzliche Infos für komplexe Elemente

• Klare Labels - Verständlich auch ohne Zusammenhang

• Live-Updates - Änderungen werden sofort mitgeteilt

Mehr Details zur korrekten Beschriftung findest du im Abschnitt "Labels" weiter unten.

4. Klare Informationen und Fehlermeldungen

Statt vage zu bleiben, erkläre genau was du brauchst.

Beispiele für klare Ansagen:

• Schreib "DD.MM.JJJJ" statt nur "Datum eingeben"

• Markiere Pflichtfelder mit einem Sternchen UND dem Text "(Pflichtfeld)"

• Erkläre das gewünschte Format: "Telefonnummer ohne Leerzeichen, z.B. 01234567890"

Bei Fehlern richtig helfen: Zeig den Weg zur Lösung:

• ❌ "Ungültige E-Mail"

• ✅ "Bitte gib eine gültige E-Mail-Adresse ein, z.B. anna@beispiel.de"

Die goldene Regel: Jede Fehlermeldung sollte erklären, wie es richtig geht.

5. Ausreichende Kontraste und Größen

Alles muss gut sichtbar und groß genug sein, damit jeder es problemlos erkennen kann.

Die wichtigsten Regeln:

• Text-Kontrast: Labels müssen einen Kontrast von 4,5:1 haben (das bedeutet: dunkler Text auf hellem Hintergrund oder umgekehrt)

• Touch-Bereiche: Mindestens 44px groß - so groß wie ein Daumen

• Keine reine Farbkodierung: Verlasse dich nie nur auf Farbe

Fehler richtig kennzeichnen: Statt nur rot umranden, kombiniere drei Elemente:

• Farbe (rot für Fehler)

• Icon (visuelles Zeichen)

• Text ("Bitte korrigieren")

So verstehen es alle - auch Menschen mit Farbenblindheit.

Mehr Details zu optimalen Farbkontrasten findest du in meinem Artikel Barrierefreie Farben und Farbkontraste im UI Design.

6. Alternativen anbieten statt Perfektion

Du musst nicht alles für jeden perfekt machen. Aber jeder sollte einen Weg finden, dein Formular zu nutzen.

Praktische Alternativen:

• Ohne JavaScript: Dein Formular funktioniert auch, wenn JavaScript ausgeschaltet ist

• Flexible Zeiten: Keine harten Zeitlimits oder die Möglichkeit zu verlängern

• Hilfe anbieten: Bei komplizierten Feldern zusätzliche Erklärungen bereitstellen

• Verschiedene Wege: Manchmal reicht ein Telefon-Kontakt als Alternative

Das Prinzip: Baue eine solide Grundversion, die für alle funktioniert. Dann füge Extras hinzu, die das Erlebnis für manche verbessern.

Fehlermeldungen richtig gestalten

Witzigerweise passieren gerade bei Fehlermeldungen sehr viele Fehler, wenn es um Barrierefreiheit geht. Es gibt aber auch hier drei Strategien:

Wann du Fehler anzeigen solltest

1. Sofort-Prüfung (während dem Tippen) Funktioniert gut bei klaren Regeln wie E-Mail-Format oder Passwort-Stärke. Aber Vorsicht: Lass die Nutzer erst fertig tippen, bevor du Fehler ausgibst.

2. Nach dem Verlassen des Feldes Das ist der Standard. Sobald jemand zum nächsten Feld springt, prüfst du den Inhalt. Nicht aufdringlich, aber rechtzeitig genug zum Korrigieren.

3. Beim Absenden Unverzichtbar als Backup. Sammelt alle übrigen Fehler und zeigt sie gesammelt an. Bonus: Mit direkten Links zu den problematischen Feldern.

Smart kombinieren: Nach-dem-Verlassen für wichtige Felder, beim Absenden als Sicherheitsnetz. Sofort-Prüfung nur sparsam nutzen.

Wie man hilfreiche Fehlermeldungen schreibt

Gute Fehlermeldungen geben konkrete Beispiele für korrekte Eingaben.

Wo Fehlermeldungen hingehören

Direkt am Eingabefeld funktionieren Fehlermeldungen am besten. Darüber oder darunter wird oft unterschiedlich gehandhabt. Die Befürworter die Fehlermeldung über dem Eingabefeld zu zeigen, argumentieren damit, dass die Bildschirmtastatur auf dem Handy oft alles unterhalb der Felder verdeckt.

Problem: Browser-Vorschläge können Fehlermeldungen überdecken. Teste das unbedingt mit verschiedenen Browsern.

Und ganz wichtig: Fehlermeldungen bitte nicht nur rot umranden. Icon + Text + Farbe = alle verstehen es.

Buttons und Interaktion

Das Problem mit deaktivierten Buttons

Deaktivierte Buttons sind frustrierend. Du füllst alles aus, willst auf "Formular absenden" klicken aber der Button ist deaktiviert. Warum ist das so? Viel Spaß bei der Suche.

Das eigentliche Problem: Screenreader können deaktivierte Buttons oft nicht fokussieren. Benutzer merken gar nicht, dass da ein Button ist.

So machst du es besser

Button immer aktiviert lassen und beim Klick die Fehlermeldung zeigen:

• Alle können den Button finden und klicken

• Nutzer verstehen sofort, was noch fehlt

• Screenreader können den Button normal vorlesen

<!-- Statt deaktiviert -->
<button type="submit" disabled>Weiter</button>

<!-- Besser so -->
<button type="submit">Weiter</button>
<

Buttons verständlich beschriften

"Weiter", "OK" und "Absenden" sind unspezifisch. Besser: "Bestellung abschließen", "E-Mail-Adresse bestätigen" oder "Konto erstellen". So weiß jeder, was passiert.

Pop-ups, Toasts und Tooltips

Vorsicht bei allem, was ein- und ausblendet. Tooltips verschwinden bei Zoom oft aus dem Sichtbereich. Auf dem Handy funktionieren Hover-Effekte sowieso nicht.

Warum Toast-Messages problematisch sind

Toast-Messages sind zu schnell weg und zu weit vom eigentlichen Problem entfernt. Screenreader bekommen sie oft gar nicht mit.

Die goldene Regel

Wichtige Informationen gehören dauerhaft sichtbar ins Interface. Tooltips nur für zusätzliche, nicht-kritische Infos verwenden.

Barrierefreie Formulare umsetzen

Jetzt wird's praktisch. Hier siehst du konkret, wie du deine Formulare umsetzt:

Labels korrekt einsetzen

Was du vermeiden solltest

<input type="email" placeholder="E-Mail eingeben...">

So machst du es richtig:

<label for="email">E-Mail-Adresse (Pflichtfeld)</label>
<input type="email" id="email" name="email" required 
       aria-describedby="email-help">
<div id="email-help">Format: name@beispiel.de</div>

Warum Placeholder problematisch sind: Placeholder verschwinden beim Tippen. Screenreader übersehen sie oft. Labels bleiben immer sichtbar und sind technisch eindeutig verknüpft.

Fehler richtig anzeigen

<div id="email-error" role="alert" aria-live="polite">
  Bitte gib eine gültige E-Mail-Adresse ein (z.B. name@beispiel.de)
</div>
<input type="email" id="email" aria-invalid="true" 
       aria-describedby="email-error"

Diese Attribute brauchst du:

• aria-invalid="true" - Warnt Screenreader vor Fehlern

• role="alert" - Macht die Fehlermeldung zur Priorität

• aria-live="polite" - Änderungen werden vorgelesen

Komplexe Elemente barrierefrei machen

Dropdowns: Standard-Selects funktionieren überall. Custom-Dropdowns sind kompliziert.

<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
  <input type="text" aria-autocomplete="list">
  <ul role="listbox" hidden>
    <li role="option">Option 1</li>
    <li role="option">Option 2</li>
  </ul>
</div>

Datepicker: Verwende drei separate Felder für Tag, Monat, Jahr. Oder nutze <input type="date"> – moderne Browser machen das zugänglich.

Mehrstufige Formulare:

<ol aria-label="Bestellvorgang">
  <li aria-current="step">Adresse eingeben</li>
  <li>Zahlungsart wählen</li>
  <li>Bestellung abschließen</li>
</ol>

Spezialfälle

CAPTCHAs und Zeitlimits

CAPTCHAs sind problematisch für Barrierefreiheit.

Bessere Alternativen:

• Versteckte Felder (Honeypots), die nur Bots ausfüllen

• Einfache Fragen: "Wie viele Beine hat ein Hund?" (Antwort: 4)

• Moderne Services: reCAPTCHA v3 läuft unsichtbar im Hintergrund

Zwei-Faktor-Authentifizierung: SMS-Codes sind problematisch bei schlechtem Mobilfunkempfang und für Menschen, die Screenreader mit SMS-Apps verwenden. Besser: App-basierte Lösungen wie Google Authenticator oder Hardware-Tokens.

Zeitlimits richtig handhaben: Zeitlimits stressen jeden. Wenn unvermeidbar: Mindestens 20 Sekunden vorher warnen und Verlängerung ermöglichen.

Mobile Formulare optimieren

Einhändige Bedienung ermöglichen: Nicht jeder kann das Handy mit beiden Händen bedienen. Wichtige Buttons gehören in den Daumenbereich.

Touch-Bereiche optimieren: Mindestens 44px für alle interaktiven Elemente. Besonders kritisch bei Checkboxes und Radio-Buttons. Hier sollte die "Hit-Area" aussen rum groß genug sein.

Bildschirmtastatur berücksichtigen: Die Tastatur deckt oft die Hälfte des Bildschirms ab.

Mehrstufige Formulare gestalten

Fortschritt richtig anzeigen: Zeig nicht nur "Schritt 2 von 5", sondern auch was passiert: "Adresse eingeben", "Zahlungsart wählen".

Kontext-Infos wiederholen: Bei langen Formularen vergisst man schnell den Zusammenhang. Wiederhole wichtige Infos: "Bestellung für Winterjacke, Größe M".

Fehler sektionsweise behandeln: Nicht erst am Ende alle Fehler anzeigen. Auf jeder Seite prüfen und korrigieren lassen.

Fokus richtig setzen: Wenn eine neue Sektion lädt, setze den Fokus auf die Hauptüberschrift. Screenreader-Nutzer wissen dann sofort, wo sie sind.

Wie testet man Formulare auf Barrierefreiheit?

Selbsttest mit der Tastatur

Das ist der einfachste Test, den du sofort machen kannst:

1. Maus weg legen oder trennen – du darfst nur die Tastatur verwenden

2. Tab-Navigation testen: Kommst du mit Tab durch alle Felder? Ist die Reihenfolge logisch?

3. Fokus-Sichtbarkeit prüfen: Siehst du immer, wo du gerade bist? Fokus-Ring deutlich genug?

4. Enter/Space testen: Lassen sich Formulare mit Enter abschicken? Funktionieren Checkboxes mit Space?

5. Escape-Funktionen: Schließen sich Dialoge mit Escape? Kannst du Aktionen abbrechen?

Was du dabei findest: Typische Probleme: Fokus springt wild umher, manche Elemente sind gar nicht erreichbar, oder der Fokus ist unsichtbar. Ein 30 Sekunden Tastatur-Test deckt viele der Navigationsprobleme auf.

Screenreader-Tests durchführen

Die richtigen Tools

• Für Windows: NVDA – Non Visual Desktop Access (kostenlos) – deckt die meisten Fälle ab 

• Für Mac: VoiceOver (integriert) – einfach mit Cmd+F5 aktivieren

• Für Android: TalkBack – in den Bedienungshilfen

Test-Checkliste

• Werden Labels korrekt vorgelesen?

• Sind Pflichtfelder als solche erkennbar?

• Hörst du Fehlermeldungen sofort, wenn sie auftreten?

• Ist die Navigation logisch nachvollziehbar?

• Werden Hilfe-Texte an der richtigen Stelle vorgelesen?

Du musst nicht zum Screenreader-Experten werden. 10 Minuten durchklicken, reicht, um die gröbsten Probleme zu lösen.

Automatische Testing-Tools

Browser-Extensions für den Schnellcheck

• WAVE: Zeigt sofort alle Accessibility-Probleme auf der Seite

• axe DevTools: Detailliertere Analyse, besonders für Entwickler, einfaches Plugin z.B. für Chrome

• Lighthouse: Integriert in Chrome DevTools, gibt Accessibility-Score

CLI-Tools (Command Line Interface Tools) für Automatisierung

• Pa11y: Automatische Tests in der Build-Pipeline

• axe-core: Kann in jedes Testing-Framework integriert werden

Was Tools nicht finden

Automatische Tools finden nur technische Probleme. Ob deine Fehlermeldungen verständlich sind oder die Navigation logisch ist, musst du selbst testen. Übrigens: Wie du den Erfolg deiner UX-Verbesserungen messbar machst, zeige ich in meinem Artikel UX Erfolg messen.

Professionelle Nutzertests

Wo finde ich Tester?

• Organisationen: Blinden- und Sehbehindertenverband, Gehörlosenverband

• Plattformen: UserTesting, Fable (speziell für Accessibility)

• Communities: Accessibility-Slack-Gruppen, lokale Selbsthilfegruppen

• Pfennigparade: Im Test.Labor testen Usability Expert*innen mit unterschiedlichen Behinderungen Zugänglichkeit & Gebrauchstauglichkeit

Vergütung und Ethik

Bezahle fair. Menschen mit Behinderungen sind Expert:innen für ihre eigenen Bedürfnisse.

Häufige Erkenntnisse aus echten Tests

Echte Nutzer verwenden oft andere Strategien als du denkst. Sie überspringen viel, suchen nach Landmarks und haben Tricks, die du nicht kennst. Ihre Frustrationen sind pure Gold für Verbesserungen.

Deutsche Ressourcen und Communities

Offizielle Quellen:

• Bundesfachstelle Barrierefreiheit Dein Anlaufpunkt für BFSG-Fragen

• BIK für Alle Deutsche WCAG-Interpretation und Prüfverfahren

Testing-Services in Deutschland:

• BITV-Test Offizielle Prüfschritte für öffentliche Stellen

• TÜV Süd

Weiterbildung und Zertifizierung:

• IAAP Deutschland: International Association of Accessibility Professionals

• WebAIM: Englischsprachig, aber die besten Online-Kurse

Communities und Austausch:

• Accessibility Club: Slack-Gruppe für deutschsprachigen Austausch

• Inclusive Design Meetups: In Berlin, München, Hamburg

• #a11y-Hashtag: Auf Twitter und LinkedIn für aktuelle Diskussionen

Zusammenfassung: Dein Weg zu barrierefreien Formularen

Die wichtigsten Takeaways

Barrierefreiheit klingt kompliziert, ist aber eigentlich logisch:

1. Rechtlicher Rahmen: Das BFSG macht Barrierefreiheit ab 2025 zur Pflicht für viele Unternehmen. Keine Empfehlung mehr, sondern Gesetz.

2. Technische Basis: Semantisches HTML ist dein Freund. Diese langweiligen Grundlagen lösen 80% der Probleme. ARIA nur als Ergänzung, nie als Ersatz.

3. Testing ist essentiell: Automatische Tools finden technische Fehler, Tastatur- und Screenreader Tests decken weitere Probleme auf, echte Nutzer zeigen dir, was wirklich funktioniert. Alle drei Methoden kombinieren.

4. Schrittweise Optimierung: Du musst nicht alles auf einmal perfekt machen. Fang mit Labels und Tastatur-Navigation an, dann Fehlermeldungen, dann die komplexeren Sachen.

Das kannst du sofort tun

Das kannst du heute noch machen:

• Labels zu allen Eingabefeldern hinzufügen – auch da, wo du bisher nur Placeholder hattest

• Fokus-Indikatoren in CSS definieren – mindestens 2px Rahmen mit 3:1 Kontrast

• Fehlermeldungen um Icons und Text ergänzen – nicht nur rot umranden

• Tastatur-Navigation einmal komplett durchlaufen – 5 Minuten, die sich lohnen

Falls du Unterstützung benötigst

Du merkst: Das Thema digitale Barrierefreiheit ist komplex, aber machbar. Falls du dir Unterstützung holen möchtest - ich schau mir gerne deine wichtigsten Formulare und zeige dir konkret, wo Optimierungspotential steckt.

Häufige Fragen

Was sind barrierefreie Formulare? 

Barrierefreie Formulare sind digitale Eingabemasken, die von allen Menschen – unabhängig von körperlichen oder technischen Einschränkungen – vollständig bedient werden können. Sie erfüllen die WCAG 2.1 Richtlinien und sind ab 2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Unternehmen verpflichtend.

Die häufigsten Barrierefreiheits-Probleme bei Formularen 

Placeholder als Label verwenden → Labels zusätzlich nutzen

Disabled Buttons ohne Erklärung → Button aktiviert lassen, Fehler zeigen

Nur Farbe für Fehlerkennzeichnung → Icons + Text ergänzen

Fehlende Fokus-Indikatoren → CSS :focus-visible verwenden

CAPTCHAs ohne Alternative → Audio-Option anbieten

Zeitlimits ohne Warnung → Verlängerung ermöglichen

Komplexe Formulare ohne Struktur → fieldset/legend verwenden

Mobile Ignoranz → Touch-Targets mindestens 44px

Muss jedes Formular WCAG 2.1 AA erfüllen?

Ab 2025 sind einige Unternehmen durch das BFSG verpflichtet. Aber auch selbst ohne Pflicht lohnt es sich, Barrieren abzubauen und seinen Kundenkreis dadurch zu erweitern.

Welche Screenreader sollte ich zum Testen nutzen?

NVDA (Windows, kostenlos) und VoiceOver (Mac, integriert) decken 80% der Nutzung ab.

Wie erkenne ich, ob mein Formular barrierefrei ist?

Drei Tests: 1) Nur mit Tastatur bedienen, 2) Screenreader verwenden, 3) Automatische Tools (WAVE, axe).

Was kostet ein Barrierefreiheits-Audit?

Je nach Komplexität 500-5.000€. Viele Probleme können Sie mit kostenlosen Tools selbst finden.