Kontaktformulare, Newsletter-Anmeldungen oder Terminbuchungen: Formulare gehören zu den wichtigsten Bestandteilen einer Website. Umso problematischer ist es, wenn Nutzer bereits an der Eingabe scheitern. Fehlende Beschriftungen, unklare Fehlermeldungen oder eine schlechte Bedienbarkeit können dazu führen, dass Anfragen ausbleiben. Mit einigen einfachen Maßnahmen lassen sich Formulare in WordPress deutlich barriereärmer gestalten.
Formularfelder eindeutig beschriften
Viele Formulare setzen ausschließlich auf Platzhaltertexte innerhalb der Eingabefelder. Das kann schnell zu Problemen führen, da die Hinweise nach der ersten Eingabe verschwinden. Besser ist es, jedes Feld mit einer dauerhaft sichtbaren Beschriftung zu versehen. Das erleichtert die Bedienung, verbessert die Orientierung und sorgt dafür, dass Hilfstechnologien die einzelnen Formularfelder korrekt erfassen können.
Beispiel: Eindeutige Feldbeschriftungen und klar gekennzeichnete Pflichtfelder verbessern die Nutzbarkeit von Formularen.
Beschriftungen auch technisch hinterlegen
Sichtbare Feldbeschriftungen allein reichen jedoch nicht aus. Damit Hilfstechnologien die Beschriftung einem Formularfeld eindeutig zuordnen können, muss die Verknüpfung auch technisch korrekt erfolgen. Dafür wird in HTML das label-Element verwendet. Moderne Formular-Erweiterungen für WordPress übernehmen diese Zuordnung meist automatisch. Probleme entstehen häufig erst durch individuelle Anpassungen oder selbst entwickelte Formulare. Prüfe deshalb insbesondere bei angepassten Formularen, ob Beschriftungen und Eingabefelder korrekt miteinander verknüpft sind.
Weiterführende Informationen zur barrierearmen Gestaltung kannst du hier nachlesen: Portal Barrierefreiheit des Bundes
Pflichtfelder klar kennzeichnen
Nutzer sollten bereits vor dem Ausfüllen erkennen können, welche Angaben erforderlich sind. Werden Pflichtfelder nicht eindeutig gekennzeichnet, führt das häufig zu unnötigen Fehlermeldungen und zusätzlichem Aufwand. Ein Sternchen ist zwar weit verbreitet, sollte jedoch erklärt werden. Ein kurzer Hinweis wie „* kennzeichnet Pflichtfelder“ schafft Klarheit und verbessert die Orientierung innerhalb des Formulars.
Gut umgesetzt:
- Vorname *
- E-Mail-Adresse *
- Telefonnummer (optional)
Oder:
- Vorname (Pflichtfeld)
- E-Mail-Adresse (Pflichtfeld)
- Unternehmen (optional)
Bei längeren Formularen kann es zudem sinnvoll sein, optionale Felder explizit als „optional“ zu kennzeichnen. Nutzer erkennen dadurch sofort, welche Angaben zwingend erforderlich sind und welche nicht.
Verständliche Fehlermeldungen anzeigen
Selbst bei gut gestalteten Formularen lassen sich Eingabefehler nicht immer vermeiden. Umso wichtiger ist es, dass Fehlermeldungen verständlich formuliert sind und Nutzern direkt zeigen, wie sie das Problem beheben können.
Wenig hilfreiche Fehlermeldungen sind beispielsweise:
- „Eingabe ungültig“
- „Fehler im Formular“
- „Ungültiger Wert“
Solche Meldungen nennen zwar das Problem, liefern aber keine konkrete Lösung.
Besser sind Hinweise wie:
- „Bitte gib eine gültige E-Mail-Adresse ein.“
- „Dieses Feld darf nicht leer sein.“
- „Die Telefonnummer darf nur Zahlen enthalten.“
Fehlermeldungen sollten zudem möglichst direkt am betroffenen Feld angezeigt werden. So erkennen Nutzer sofort, welche Eingabe korrigiert werden muss. Wichtig ist außerdem, Fehler nicht ausschließlich durch Farben zu kennzeichnen. Eine rote Umrandung kann hilfreich sein, sollte jedoch immer durch einen verständlichen Hinweis ergänzt werden.
Formulare mit der Tastatur bedienbar machen
Nicht alle Nutzer bedienen eine Website mit der Maus. Deshalb sollten sich Formulare vollständig mit der Tastatur ausfüllen lassen.
Prüfe insbesondere, ob alle Formularfelder über die Tabulatortaste erreichbar sind und die Reihenfolge der Felder logisch aufgebaut ist. Nutzer sollten außerdem jederzeit erkennen können, welches Feld aktuell ausgewählt ist. Eine sichtbare Hervorhebung des aktiven Elements erleichtert die Orientierung und verhindert Fehleingaben.
Besondere Aufmerksamkeit erfordern individuelle Elemente wie Kalenderauswahlen, Dropdown-Menüs oder Kontrollkästchen. Hier kommt es häufig vor, dass die Bedienung mit der Tastatur nur eingeschränkt oder gar nicht möglich ist. Ein einfacher Praxistest genügt oft schon: Versuche, das gesamte Formular ausschließlich mit der Tabulatortaste auszufüllen. Funktioniert das problemlos, ist bereits eine wichtige Voraussetzung für barrierearme Formulare erfüllt.
Eingaben auf Smartphones erleichtern
Formulare sollten nicht nur am Desktop komfortabel nutzbar sein. Auch auf Smartphones können kleine Anpassungen die Eingabe deutlich erleichtern.
Dazu gehört beispielsweise die Verwendung passender Eingabefelder für E-Mail-Adressen, Telefonnummern oder Webseiten. Moderne Smartphones zeigen abhängig vom Feldtyp automatisch die passende Tastatur an. Nutzer können ihre Angaben dadurch schneller und fehlerfreier eingeben.
Prüfe außerdem, ob Schaltflächen und Formularfelder ausreichend groß dargestellt werden. Zu kleine Bedienelemente erschweren die Nutzung auf Touchscreens und können zu Fehleingaben führen.
Formulare vor der Veröffentlichung testen
Auch technisch sauber umgesetzte Formulare sollten vor der Veröffentlichung getestet werden. Oft fallen Probleme erst auf, wenn das Formular unter realen Bedingungen genutzt wird.
Ein einfacher Tastaturtest liefert bereits wertvolle Erkenntnisse. Lässt sich das Formular vollständig über die Tabulatortaste bedienen und ist jederzeit erkennbar, welches Feld aktuell ausgewählt ist, wurde eine wichtige Voraussetzung erfüllt.
Zusätzlich empfiehlt sich ein Test mit vergrößerter Ansicht. Vergrößere die Seite im Browser auf 200 Prozent und prüfe, ob alle Inhalte weiterhin lesbar sind und sich problemlos bedienen lassen.
Wer noch einen Schritt weitergehen möchte, kann das Formular mit einem Bildschirmleseprogramm testen. So lässt sich schnell feststellen, ob Feldbeschriftungen, Hinweise und Fehlermeldungen korrekt ausgegeben werden.
Bereits diese einfachen Prüfungen helfen dabei, viele typische Barrieren frühzeitig zu erkennen und zu beheben.
Viele typische Barrieren in Formularen lassen sich bereits während der Erstellung vermeiden. Mit den richtigen Einstellungen und einer sorgfältigen Prüfung vor der Veröffentlichung sorgst du dafür, dass möglichst alle Nutzer dein Formular problemlos verwenden können.
Wenn du Unterstützung bei der Umsetzung barrierearmer Formulare in WordPress benötigst, freuen wir uns auf deine Nachricht.
