Aktuell setzen wir für einen Kunden ein neues Kontaktformular auf der Website um und stehen dabei vor einer klaren Herausforderung: Es soll nicht nur optisch ansprechend und konversionsstark sein, sondern auch den Anforderungen des neuen Barrierefreiheitsgesetzes entsprechen.
Spätestens hier merkt man, wie schnell es bei Formularen zu Hürden kommen kann – sei es bei Screenreader-Nutzung, Tastatursteuerung oder der Verständlichkeit von Fehlermeldungen. In diesem Beitrag zeigen wir, worauf es bei barrierefreien Formularen ankommt und wie sich das in WordPress mit Gravity Forms praxisnah umsetzen lässt.
Warum barrierefreie Formulare heute Pflicht und nicht mehr „Nice to have“ sind
Das Thema Barrierefreiheit im Web ist längst keine Kür mehr, sondern eine rechtliche und wirtschaftliche Pflicht. Menschen mit Seh- oder Hörbehinderung, motorischen Einschränkungen oder kognitiven Beeinträchtigungen sollen Online-Angebote gleichberechtigt nutzen können.
Formulare spielen dabei eine zentrale Rolle, denn ohne funktionierende und zugängliche Formulare gibt es keine Kontaktanfragen, keine Newsletter-Anmeldungen, keine Bestellungen. Wer Barrieren einbaut, schließt Menschen bewusst oder unbewusst aus – und riskiert gleichzeitig rechtliche Konsequenzen, Image-Schäden und unnötige Conversion-Verluste.
Das Barrierefreiheitsgesetz: Für wen gilt es und was bedeutet es für Websites?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die europäische Barrierefreiheitsrichtlinie in deutsches Recht um und nimmt ab 2025 insbesondere viele private Unternehmen stärker in die Pflicht. Betroffen sind vor allem Anbieter digitaler Produkte und Dienstleistungen wie Online-Shops, E-Books, Banking-Apps und viele Serviceportale, die an Verbraucherinnen und Verbraucher gerichtet sind.
Auch wenn nicht jede kleine Website rechtlich sofort direkt betroffen ist, werden sich Standards und Erwartungen im Markt deutlich verschieben. Wer heute Formulare relauncht, sollte sie daher von Anfang an nach anerkannten Standards wie der WCAG 2.1 (Stufe AA) und den Vorgaben der Barrierefreien-Informationstechnik-Verordnung denken. Praktisch bedeutet das: Inhalte müssen mit Hilfstechnologien nutzbar sein, per Tastatur bedienbar bleiben, eine klare Struktur haben und Fehlerzustände verständlich kommuniziert werden.
Was es auf Webseiten konkret zu berücksichtigen gilt
Auf Webseiten geht es bei Barrierefreiheit längst nicht nur um Farben oder Schriftgrößen, sondern um die zugrunde liegende Struktur und Interaktion. Formulare brauchen sinnvolle und programmatisch auslesbare Labels, logische Gruppen und eine klare Reihenfolge der Eingabefelder.
Die Fokusreihenfolge per Tab-Taste muss nachvollziehbar sein und der sichtbare Fokus (Barrierefreiheit Fokus) ausreichend hervorgehoben sein. Fehlermeldungen dürfen nicht nur farblich markiert werden, sondern müssen auch textlich klar und dem jeweiligen Feld zugeordnet sein.
Und ganz wichtig: Es darf keine Bedienelemente geben, die nur mit der Maus nutzbar sind – Stichwort Barrierefreiheit Tastatursteuerung.
Barrierefreie WordPress-Webseiten: Grundprinzipien in der Praxis
WordPress bietet eine gute Grundlage für barrierefreie Websites, vorausgesetzt, Theme und Plugins sind sauber entwickelt. Der erste Schritt ist daher die Wahl eines Themes, das sich an Barrierefreiheitsstandards orientiert, semantisch korrektes HTML ausgibt und eine sichtbare Fokusmarkierung zulässt.
Auf inhaltsseitiger Ebene sollten Überschriften logisch gegliedert, Alternativtexte für Bilder gepflegt und Links verständlich benannt werden. Für Formulare bedeutet das: Verwendung nativer HTML-Elemente wie input, select und textarea, klare Feldbeschriftungen mit label, sinnvoll gruppierte Bereiche mit fieldset und legend und die Vermeidung von reinen Placeholder-Labels.
Viele Probleme entstehen, wenn Page-Builder automatisch komplexen, schwer zugänglichen Code erzeugen – hier lohnt sich ein genauer Blick oder eine gezielte Anpassung durch die Webentwicklung.
Wie sich barrierefreie Formulare in WordPress konkret umsetzen lassen
In WordPress empfehlen wir bei komplexeren Formularen den Einsatz spezialisierter Form-Plugins, die Barrierefreiheit bereits berücksichtigen. Die Basis sind immer korrekte Feldtypen, eindeutige Bezeichnungen und eine logische Reihenfolge der Felder.
Pflichtfelder sollten sowohl visuell (z. B. mit einem Sternchen und einer Legende) als auch technisch (required-Attribut oder aria-required) gekennzeichnet sein. Für Fehlermeldungen gilt: Sie müssen dem jeweiligen Feld programmatisch zugeordnet sein, etwa über aria-describedby, damit Screenreader-Nutzer sofort wissen, wo der Fehler liegt.
Außerdem sollte das Formular komplett per Tastatur durchlaufen werden können, ohne dass dabei unerwartete Kontextwechsel ausgelöst werden.
Barrierefreie Formulare mit Gravity Forms erstellen
Gravity Forms ist eines der leistungsstärksten Formular-Plugins für WordPress und kann bei richtiger Konfiguration viel Arbeit in Sachen Barrierefreiheit abnehmen. Das Plugin erzeugt bereits saubere HTML-Strukturen und bietet für jedes Feld ein Label, das als Beschriftung verwendet werden sollte, statt auf Platzhaltertexte zu setzen.
Auch die Zuordnung von Fehlermeldungen zu einzelnen Feldern ist möglich, sodass Barrierefreiheit Label und Fehlerrückmeldungen sauber zusammenspielen. Wichtig ist, auf „Fancy“ Felder oder rein visuelle Effekte zu verzichten, wenn sie die Tastatursteuerung aushebeln oder den Fokus unklar springen lassen.
Für komplexere Konfigurationen lassen sich eigene CSS-Klassen und ARIA-Attribute ergänzen, um beispielsweise Statusmeldungen nach dem Abschicken des Formulars (Erfolg oder Fehler) für Screenreader deutlich zu machen.
Typische Stolpersteine und wie Gravity Forms dabei hilft
Ein häufiger Fehler sind Kontaktformulare, die in Popups oder Off-Canvas-Bereichen versteckt sind, ohne ordentliches Fokusmanagement. Gravity Forms lässt sich jedoch auch in klar strukturierte Seitenbereiche integrieren, die sich harmonisch in die barrierefreie Website einfügen.
Außerdem bietet das Plugin Möglichkeiten für mehrstufige Formulare, bei denen Nutzerinnen und Nutzer mit Fortschrittsanzeigen durch den Prozess geführt werden – wichtig bei längeren Prozessen wie Bewerbungs- oder Antragsformularen.
Wer zusätzlich barrierefreie Formulare als PDF bereitstellen möchte, sollte darauf achten, dass aus den im Backend gepflegten Formularen nicht schlicht druckbare, sondern korrekt getaggte PDF-Dokumente entstehen. Barrierefreie Formulare PDF benötigen richtige Überschriftenhierarchien, korrekt ausgezeichnete Formularfelder und Alternativtexte für grafische Elemente.
Barrierefreie Formulare und Webentwicklung: Zusammenarbeit ist entscheidend
Barrierefreie Formulare sind nie nur eine Plugin-Frage. Design, Webentwicklung, Content und QA müssen zusammenarbeiten, um WCAG-Vorgaben in ein schlüssiges Nutzungserlebnis zu übersetzen.
Entwicklerinnen und Entwickler sind dafür verantwortlich, sauberes, semantisches Markup auszugeben und Skripte so zu bauen, dass sie Tastatur- und Screenreader-kompatibel sind. Designer achten auf ausreichend Kontraste, klare Fokuszustände und verständliche visuelle Gruppierungen.
Redakteure formulieren einfache, verständliche Feldbezeichnungen und Fehlermeldungen in leicht zugänglicher Sprache. Am Ende steht idealerweise eine barrierefreie Webseite nach Bund-Standards, die rechtlichen Vorgaben genügt und sich für alle Nutzergruppen intuitiv bedienen lässt.
FAQ zu barrierefreien Formularen
Ein barrierefreies Formular ist ein Online- oder PDF-Formular, das von möglichst vielen Menschen, einschließlich Personen mit Behinderungen, selbstständig genutzt werden kann. Dazu gehören verständliche Feldbeschriftungen, vollständige Tastaturbedienbarkeit, klare Fehlermeldungen und eine technische Umsetzung, die mit Screenreadern und anderen Hilfsmitteln funktioniert.
Nein, Barrierefreiheit ist mehr als ein aufgeräumtes Design. Entscheidend sind semantisch korrekte Strukturen, die richtige Nutzung von label, fieldset, legend und ARIA-Attributen sowie eine saubere Fokusführung. Auch Fehlermeldungen, Kontraste und die Logik der Formularschritte spielen eine Rolle und werden in Richtlinien wie der WCAG 2.1 konkret beschrieben.
Platzhaltertexte sind kein barrierefreier Ersatz für sichtbare Labels. Sie verschwinden beim Tippen, werden von Screenreadern nicht zuverlässig als Beschriftung erkannt und sind häufig zu kontrastarm. Ein barrierefreies Formular nutzt immer sichtbare Labels und kann zusätzliche Hinweise per Placeholder oder Hilfetext ergänzen.
Gravity Forms bietet eine gute technische Basis und viele Funktionen, die Barrierefreiheit unterstützen, ersetzt aber kein durchdachtes Konzept. Felder müssen sinnvoll benannt, Pflichtfelder korrekt gekennzeichnet und Design sowie Einbettung in die Seite sorgfältig umgesetzt werden. Mit dem richtigen Setup lassen sich jedoch sehr gut barrierefreie Formulare erstellen, die WCAG-konform sind.
Ein erster Schritt ist der Tastaturtest: Lässt sich das Formular komplett mit Tab, Shift+Tab und Enter bedienen, ohne dass der Fokus „verschwindet“ oder unerwartet springt? Anschließend sollten Screenreader-Tests, zum Beispiel mit NVDA oder VoiceOver, durchgeführt werden, um Labels, Fehlermeldungen und Fokusverhalten zu prüfen. Ergänzend helfen Tools wie Lighthouse oder axe, typische technische Barrieren aufzuspüren, ersetzen aber nie den manuellen Praxistest.
