Opens in a new tab

Barrierefreie Formulare – Der Guide für inklusive Eingabefelder

Online-Formulare sind wie Briefkästen– doch für viele Menschen sind sie verschlossen, wie Briefkästensten ohne Schlitz. Nicht weil sie nicht wollen, sondern weil die Formulare Barrieren aufbauen. Hier erfährst du, wie du Formulare so gestaltest, dass wirklich alle sie nutzen können und dein Posteingang nicht leer bleibt.

Philipp Bremer, 20. Januar 2026

Collage verschiedener Bilder die veranschaulichen was für Komponenten es braucht um ein Formular zu erstellen.

Warum Formulare oft nicht korrekt ausgefüllt werden können

Stell dir vor: Du navigierst mit der Tab-Taste durch ein Formular. Plötzlich springt der Fokus wild umher, du weisst nicht, welches Feld gerade aktiv ist. Oder du nutzt einen Screenreader, und dieser liest nur «Eingabefeld» – aber nicht, wofür. Frustrierend, oder?

Typische Probleme:

  • Felder ohne erkennbare Beschriftung
  • Pflichtfelder nur mit einem roten Stern ohne verständliche Erklärung
  • Fehlermeldungen wie «Fehler» (was ist das Problem?)
  • Unlogische Tab-Reihenfolge

Die gute Nachricht: Diese Barrieren lassen sich mit durchdachtem Design vermeiden.

Die 5 Erfolgsfaktoren für barrierefreie Formulare

Diese 5 Punkte sind Best Practices, die allen Nutzer:innen helfen. Natürlich gibt es technische Tricks im Code, um Screenreadern Informationen anders zu vermitteln – doch wenn du Dinge von Anfang an klar und sichtbar gestaltest, profitieren wirklich alle davon.

1. Labels – Jedes Feld braucht einen Namen

Ein Label ist die Beschriftung eines Eingabefeldes. Klingt banal? Ist es auch – und trotzdem fehlt es oft. Statt Platzhalter-Text im Feld («Name eingeben…») sollte das Label immer sichtbar sein. Warum? Ein Platzhalter verschwindet bei der Eingabe und ersetzt keine verlässlich zugeordnete Beschriftung. Ein sichtbares, technisch mit dem Feld verbundenes Label bleibt verständlich.

  • Richtig: Label über oder neben dem Feld: «Vorname»
  • Falsch: Nur Platzhalter-Text im Feld

2. Pflichtfelder – Klar kommunizieren, was Pflicht ist

Ein roter Stern (*) allein erklärt nicht zuverlässig, dass ein Feld ausgefüllt werden muss. Erkläre das Zeichen sichtbar und kennzeichne Pflichtfelder auch im Code. Eine verständliche Beschriftung wie «E-Mail (Pflichtfeld)» macht die Anforderung unmittelbar deutlich. Das W3C erläutert die Kennzeichnung von Pflichtfeldern.

  • Richtig: «E-Mail (Pflichtfeld)»
  • Auch gut: Text über dem Formular: «Felder mit * sind Pflichtfelder»
  • Falsch: Nur roter Stern ohne Erklärung

3. Fehlermeldungen – Verständlich und sichtbar

«Fehler bei der Eingabe» hilft niemandem weiter. Was ist falsch gelaufen? Welches Feld betrifft es? Eine gute Fehlermeldung ist konkret und erscheint direkt beim betroffenen Feld.

  • Richtig: «Bitte gib eine gültige E-Mail-Adresse ein.»
  • Falsch: «Fehler» oder rote Umrandung ohne Text

Barrierefreiheit meets UX: Klare Fehlermeldungen helfen nicht nur Menschen mit Behinderungen – sie reduzieren Abbrüche und steigern die Conversion-Rate für alle Nutzer:innen.

4. Lösungshinweise – Wie behebe ich das Problem?

Eine Fehlermeldung ist der erste Schritt. Der zweite: Zeig, wie man es richtig macht. Wenn jemand bei der E-Mail-Adresse einen Tippfehler macht, reicht «ungültige E-Mail» nicht aus.

  • Richtig: «Bitte gib eine gültige E-Mail-Adresse ein – zum Beispiel: [email protected]»
  • Auch gut: Hilfetext unter dem Feld: «Wir benötigen deine E-Mail für die Bestätigung.»

5. Tastaturnavigation – Ohne Maus ans Ziel

Viele Menschen nutzen keine Maus: motorische Einschränkungen, Screenreader-Nutzer:innen oder einfach Power-User. Die Tab-Taste muss funktionieren – und zwar in einer logischen Reihenfolge.

  • Richtig: Tab führt von oben nach unten durch die Felder
  • Wichtig: Fokuszustand ist sichtbar (farbige Umrandung)
  • Falsch: Fokus springt wild umher oder ist unsichtbar

Bei mehrstufigen Formularen und Logins lohnt sich ausserdem ein Blick auf die neuen Anforderungen von WCAG 2.2 an wiederholte Eingaben und die Anmeldung.

Brauchst du Unterstützung bei der Umsetzung? Von der Analyse deiner bestehenden Formulare bis zur kompletten Neuentwicklung – wir begleiten dich Schritt für Schritt zu barrierefreien Lösungen.

Beratung anfragen

Praxistest: Unser eigenes Kontaktformular

Theorie ist das eine, Praxis das andere. Deshalb haben wir unser eigenes Kontaktformular nach genau diesen Prinzipien aufgebaut. Du findest dort:

  • Sichtbare Labels bei jedem Feld
  • Klare Kennzeichnung von Pflicht- und optionalen Feldern
  • Verständliche Hilfe-Texte
  • Logische Tab-Navigation

Möchtest du sehen, wie das in echt aussieht? Probier es mit der Tab-Taste aus, lass die Labels mit dem Screenreader vorlesen – oder schreib uns einfach deine Fragen zur Barrierefreiheit. Wir helfen gerne weiter. Zum barrierefreien Kontaktformular

Fazit: Formulare für alle öffnen

Barrierefreie Formulare sind kein Hexenwerk. Mit klaren Labels, verständlichen Fehlermeldungen und durchdachter Navigation schaffst du Zugänge statt Hürden. Das Ergebnis: Mehr erfolgreiche Anfragen, zufriedenere Nutzer:innen und ein echtes Zeichen für Inklusion.

Häufige Fragen zu barrierefreien Formularen

Verlass dich nicht allein auf einen Platzhalter im Eingabefeld. Er verschwindet bei der Eingabe und ersetzt keine verlässlich zugeordnete Beschriftung. Ein sichtbares Label neben oder über dem Feld erklärt dessen Zweck auch während des Ausfüllens. Im Code muss die Beschriftung mit dem Feld verbunden sein.

Nenne das betroffene Feld, erkläre den Fehler und zeige, wie er behoben werden kann. Statt nur «Fehler» hilft beispielsweise «Bitte gib eine gültige E-Mail-Adresse ein». Die Meldung sollte beim Feld verständlich sichtbar und auch technisch mit ihm verknüpft sein. Eine rote Umrandung allein reicht nicht.

Teste den ganzen Ablauf: Felder erreichen, Angaben eingeben, Fehler korrigieren und das Formular absenden. Prüfe ihn auch mit Tastatur und Screenreader. Achte darauf, ob Beschriftungen, Hilfen sowie Fehler- und Erfolgsmeldungen verständlich wahrnehmbar sind. Ein automatischer Test allein kann die Zugänglichkeit nicht bestätigen.

Bereit für barrierefreie Formulare? Egal ob Quick Check, umfassendes Audit oder komplette Webentwicklung – wir finden die passende Lösung für dich.

Formulare prüfen lassen

Quellen

W3C: Labeling Controls

W3C: User Notification

W3C: SC 1.4.1 – Use of Color

W3C: Evaluating Web Accessibility Overview

W3C: Form Instructions

Über den Autor

Profilbild von Philipp Bremer

Philipp Bremer ist ein Barrierefreiheits-Enthusiast in Zürich. Mit seiner Leidenschaft für inklusive Webentwicklung hilft er Unternehmen, NGOs und Einzelpersonen dabei, Websites zu schaffen, die wirklich für alle Menschen zugänglich sind.

Mehr über Philipp Bremer erfahren

Schon diese Artikel gelesen?

Wir glauben, dass da für jede:n was dabei ist: