Barrierefreie Formulare – Der Guide für inklusive Eingabefelder

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
• Roter Stern bei Pflichtfeldern (für Screenreader unsichtbar)
• 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? Screenreader lesen sonst nichts vor, und nach dem ersten Tippzeichen verschwindet der Hinweis.

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

2. Pflichtfelder – Klar kommunizieren, was Pflicht ist

Ein roter Stern (*) sagt einem Screenreader: nichts. Menschen mit Sehbehinderung wissen nicht, dass dieses Feld ausgefüllt werden muss. Die Lösung? Pflichtfelder explizit benennen.

• 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

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: name@beispiel.ch»
• 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

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.