Formulare barrierefrei gestalten

Einer der wichtigsten Bereiche bei der Umsetzung barrierefreier Internetseiten ist die Ausgestaltung von Formularen, da gerade hier ein hohes Maß an Interaktion mit dem User gefordert ist.

Barrierefreie Standards für Formulare

Insbesondere bei Formularen ist es wichtig, dass man die für den Einsatzzweck vorgesehenen Standard-HTML-Elemente verwendet und individuelle Lösungen möglichst vermeidet, weil:

• Alle Endgeräte inkl. assistiver Technologien diese Standardelemente in vollem Umfang unterstützen.

• Individuelle Anpassungen ggf. auf den unterschiedlichen Endgeräten überhaupt nicht zur Geltung kommen (da Hersteller die Darstellung aus Usability-Gründen sehr unterschiedlich interpretieren können).

• Eigens erstellte oder stark angepasste Komponenten oder Funktionen nicht mit allen Endgeräten inkl. aller möglichen assistiven Technologien einwandfrei funktionieren.

Wie baue ich ein barrierefreies Formular auf?

Beim Aufbau von Formularen sollten möglichst Fieldsets mit den entsprechenden Legends verwendet werden. Ein Fieldset fasst thematisch zusammengehörige Komponenten oder Bereiche zusammen und erzeugt gerade bei großen Formularen eine besser erfassbare Strukturierung.

Das kann zum einen eine allgemeine Gruppierung sein – z. B. alle Eingabefelder für „persönliche Daten“. Aber auch insbesondere bei Mehrfacheingaben (Checkboxen + Radiobuttons) hilft es, die einzelnen Optionen als eine Komponente zu begreifen.

• Alle Eingabemöglichkeiten müssen durch ihre jeweiligen Labels klar und eindeutig benannt sein.

• Alle Interaktionsmöglichkeiten sind ausreichend groß darzustellen, damit sie auch bei motorischen Einschränkungen sicher bedienbar sind.

• Eingabemöglichkeiten sind abhängig von ihrem Inhalt entsprechend groß zu gestalten (eine mehrzeilige Eingabe muss klar als solche erkennbar sein).

• Die Tab-Reihenfolge muss der inhaltlichen Logik entsprechen (hier ist der Aufbau im Quelltext entscheidend). Wenn z. B. ein Formular unbedingt zweispaltig sein muss, in der linken Spalte persönliche Angaben gemacht werden und in der rechten Spalte andere Themen abgefragt werden, dann muss natürlich zuerst der Block mit den persönlichen Daten durchlaufen werden, bevor es in den nächsten Block geht.

• Pflichtfelder müssen deutlich als solche erkennbar sein. Bei Eingabefehlern müssen die fehlerhaften Eingaben deutlich gekennzeichnet und mit einer eindeutigen Fehlermeldung versehen werden.

Hinweis: Jedes Pflichtfeld ist aber auch immer eine Hürde – daher sollten diese auf das wirklich Notwendige beschränkt sein. Das entspricht gleichzeitig auch den Grundsätzen des Datenschutzes.

• Es muss immer – bevor die Eingaben letztendlich versendet werden – eine Möglichkeit der Fehlerkorrektur vorgesehen sein, z. B. ein Vorschau-Schritt der eingegebenen Daten mit der Option, diese noch einmal anzupassen.

• Der Fokus muss klar ausgezeichnet sein, sodass Tastaturnutzende jederzeit erkennen können, an welcher Stelle sie sich im Formular befinden.

Zur Verbesserung der Bedienung mit assistiven Technologien können bei Formularen zusätzliche ARIA-Attribute verwendet werden, wie z. B.:

• aria-required="true" – Kennzeichnung von Pflichtfeldern

• aria-invalid="true" – Kennzeichnung fehlerhafter Eingaben

• aria-live="polite" – Für dynamische Meldungen, z. B. Fehlermeldungen oder Hinweise

• aria-labelledby="ID des Elements" – Titelzuweisung über ein anderes Element

• aria-describedby="ID des Elements" – Verweis auf ein beschreibendes Element, z. B. eine Ausfüllhilfe

Was bringt mir ein Placeholder-Attribut?

Das Placeholder-Attribut steht direkt im Eingabefeld und verschwindet, sobald der Fokus auf dieses Feld geht. Grundsätzlich kann das hilfreich sein – es können sich jedoch auch Probleme ergeben:

• Placeholder wird vom Browser häufig mit sehr geringem Kontrast dargestellt und ist somit ggf. schlecht lesbar.

• Eine Kontrastanpassung des Placeholders kann zu Verwirrung führen, da das Feld ausgefüllt scheint.

• Da ein Placeholder kein Label ersetzt, sind die Informationen oft redundant, was hinderlich sein kann – z. B. wenn ein Screenreader erst das Label und dann den Placeholder vorliest. (Ein rein visuelles Ausblenden des Labels ist daher nur bedingt sinnvoll, da es ggf. trotzdem vorgelesen wird.)

• Die Verwendung sogenannter Fly-out-Labels (Label steht anfangs an der Stelle des Placeholders und wird bei Fokus aus dem Feld geschoben) birgt das Risiko, dass diese Animation verwirrend wirkt und vom eigentlichen Eingabevorgang ablenkt.

Was muss ich bei Placeholdern beachten?

Ein Placeholder kann zusätzliche Informationen bereitstellen, die jedoch nicht essenziell für die Bedienung des Formulars sein dürfen, da sie unter Umständen nicht von allen Nutzer*innen wahrgenommen werden. Hinweise und Ausfüllhilfen können alternativ an anderer Stelle stehen – mit direktem Verweis über aria-describedby.

Diese Dinge sollten bei Formularen beachtet werden:

Neben der barrierefreien Gestaltung gelten auch allgemeine Best Practices für Formulare, z. B.:

• Vermeiden von doppelten Eingaben (z. B. E-Mail-Adresse doppelt abfragen – hier wird oft einfach die erste Eingabe kopiert).

• Die einfachste und am besten wahrnehmbare Form bei Formularen ist ein einspaltiger Aufbau (alles untereinander).

• Das Ergebnis – ob erfolgreich verschickt oder mit Fehlern – sollte klar und deutlich kommuniziert werden.

• Bei mehrschrittigen Formularen muss stets erkennbar sein, an welcher Stelle man sich befindet. Ein Vor- und Zurücknavigieren sollte ohne Datenverlust möglich sein.

Formulare mit Mehrwert

Grundsätzlich gilt: Formulare sollten möglichst einfach und auf das Notwendigste reduziert gestaltet sein – so entsteht der größte Nutzen für alle Nutzer*innen.