Formulare 102: Wie gestaltet man barrierefreie Formulare? 13 praktische Tipps

Wo will ich mit dieser Geschichte hin? Zugänglichkeit. Insbesondere auf schlechte Zugänglichkeit. In diesem Artikel geht es darum, wie man barrierefreie Formulare gestaltet.

Denn ein schlecht gestaltetes Formular hält Ihre Besucher davon ab, auf Ihrer Website zu konvertieren. Durch die Gestaltung barrierefreier Formulare verbessern Sie nicht nur die Benutzerfreundlichkeit für Menschen mit Behinderungen. Sie verbessern die Benutzerfreundlichkeit für alle.

Wie können Sie also wirksame Formulare entwerfen, die auch zugänglich sind? 

5 Wichtige Erkenntnisse für barrierefreie Formulare

In diesem Artikel erfahren Sie, wie Sie ein barrierefreies Formular gestalten können. Ich gebe Ihnen 13 praktische Tipps, die Sie sofort anwenden können, um Ihr Formular für alle Nutzer Ihrer Website zugänglich zu machen;

Möchten Sie wissen, ob dieser Artikel für Sie von Interesse ist? Hier sind die 5 wichtigsten Erkenntnisse, die Sie sofort umsetzen können:

1. Vergrößern Sie den Klickbereich, indem Sie Beschriftungen über den Eingabefeldern verwenden

2. Hinweisen Sie in H1 oder H2, dass ein Fehler aufgetreten ist oder dass das Formular erfolgreich übermittelt wurde

3. Zeigen Sie eine Zusammenfassung der Fehlermeldungen oberhalb des Formulars

4. Bieten Sie allgemeine Anweisungen vor dem Formular an, damit Hilfsmittel die Anweisungen lesen können

5. Verwenden Sie eine Mischung aus textlichen und visuellen Bestätigungen in Ihrem Formular

Was sind barrierefreie Formulare und warum werden sie benötigt?

Es mag Sie nicht überraschen (oder vielleicht doch): Die meisten Online-Formulare, die Sie finden, sind nicht für Menschen mit Seh-, Hör-, motorischen oder kognitiven Beeinträchtigungen optimiert. Allein in den Niederlanden haben 4,5 Millionen Menschen irgendeine Form von Behinderung oder chronischer Krankheit.  

Aus Untersuchungen des Baymard-Instituts aus dem Jahr 2021 geht hervor, dass 94 % der größten E-Commerce-Websites die Anforderungen an die Barrierefreiheit nicht erfüllen (WCAG 2.1 AA).

Wir haben noch einen langen Weg vor uns. Das gilt auch für Concept7. Wir sind da sehr ehrlich. Es gibt immer Raum für Verbesserungen.

Möchten Sie mehr über Barrierefreiheit und Websites erfahren? Wir haben bereits einen ausführlichen Artikel über die Zugänglichkeitsrichtlinien für Web-Inhalte (WCAG) und die Zugänglichkeit von Websites geschrieben.

Zugänglich für alle, aber wie?

In ihrem Buch "Barrierefreiheit für alle" gibt Laura Kalbag (2017) vier Leitlinien zur Verbesserung der Benutzerfreundlichkeit für alle:

• Visuell: macht es leicht zu sehen

• Auditiv: macht es leicht zu hören

• Motorisch: macht es leicht zu interagieren

• Kognitiv: macht es leicht zu verstehen

"Sehende Nutzer können sie lesen, sehbehinderte Nutzer können sie mit Hilfe eines Bildschirmlesegeräts hören, und motorisch eingeschränkte Nutzer können das Feld dank des größeren Trefferbereichs leichter fokussieren." - Adam Silver, Form Design Patterns

Barrierefreie Formulare sind eine Zusammenarbeit zwischen Technologie, Design und Text. Es reicht nicht aus, nur ein funktionell schönes Formular zu entwerfen, wenn die Technik nicht funktioniert!

Mit der richtigen Technologie führen Sie die Benutzer so durch das Formular, wie es für sie am besten ist. Zum Beispiel durch die richtigen Tastaturanweisungen oder assistive Technologien;

Der Bedarf ist groß. In diesem Artikel zeigen wir Ihnen, wie Sie Formulare entwerfen, die den WCAG-Richtlinien entsprechen. Und wie Sie das allgemeine Benutzererlebnis verbessern können. 

Diese Erkenntnisse wurden auf der Grundlage der Richtlinien des World Wide Web Consortium (W3C) und wcag.co.uk erarbeitet.

Zugängliche Etiketten

In einem früheren Artikel haben wir uns eingehend mit benutzerfreundlichen Etiketten und der Platzierung von Etiketten in Formularen beschäftigt. Jetzt gehen wir näher darauf ein, was Etiketten zugänglich macht.

Tipp 1: Löschen des Elements <label>.

Zunächst einmal sollten alle Eingabefelder ein Label haben, das im Code mit dem <label> Element eindeutig identifizierbar ist. Und diese Beschriftungen sollten auch den Zweck oder die Frage des Eingabefeldes deutlich machen. Dies gilt auch für Schaltflächen. 

Bei Eingabefeldern wie einer Suchleiste ist es jedoch erlaubt, die Beschriftung visuell auszublenden. Das bedeutet, dass es im Code klar ist, dass es eine Beschriftung gibt. Diese wird aber nicht visuell angezeigt. 

Wenn ein Benutzer auf ein Etikett klickt, wird auch das Eingabefeld aktiviert. Je größer der "Klickbereich" ist, desto leichter kann z. B. jemand mit einer motorischen Behinderung auf das Eingabefeld oder die Beschriftung klicken (Adam Silver, Form Design Patterns, 2018, S. 21). 

Dies ist ein gutes Argument für die Verwendung von Etiketten über Eingabefeldern anstelle von anderen Platzierungen in Formularen. Denn ein Etikett über dem Eingabefeld, einschließlich der Anweisungen direkt unter dem Etikett, vergrößert den "Klickbereich" im Vergleich zu schwebenden Etiketten oder links/rechts ausgerichteten Etiketten.

Tipp 3: Zusammengehörige Eingabefelder gruppieren

Besteht Ihr Formular aus mehreren Abschnitten und mehreren Eingabefeldern? Dann ist es gut, die Eingabefelder, die miteinander in Beziehung stehen, zu gruppieren. Denken Sie zum Beispiel an persönliche Daten und Adressangaben. So wird sichergestellt, dass der Benutzer weiß, was ihn erwartet, und der Kontext für ihn klar ist.

Manchmal braucht Ihr Formular Anweisungen oder Erklärungen, damit der Benutzer es problemlos ausfüllen kann. Zeigen Sie daher Anweisungen, die für das gesamte Formular relevant sind, ganz oben an. Überlegen Sie sich, wie Sie Pflicht- oder optionale Felder erkennen können. 

Wenn diese Informationen vor dem Formular angeboten werden, kann die unterstützende Technologie den Text besser lesen, bevor sie in den "Formularmodus" umschaltet;

Es gibt drei Möglichkeiten, Anweisungen speziell nach Eingabefeldern zu erteilen:

• In der Beschriftung als Teil der Frage

• Unter der Beschriftung oder unter dem Eingabefeld

• Innerhalb des Eingabefeldes

Tipp 4: Anweisungen auf dem Etikett angeben

Die einfachste Art, Anweisungen zu geben, ist über das Etikett selbst. Sie können dies tun, indem Sie klare Fragen stellen, die nicht lang und kompliziert sind. Sie können zum Beispiel auch das Format angeben, das jemand ausfüllen muss. 

• Beispiel: Geburtsdatum (DD/MM/YYYYY)

Tipp 5: Anweisungen über das Etikett hinaus

Manchmal reicht der Platz in der Beschriftung nicht aus, um eine vollständige Erklärung zu geben. Dann können Sie die Erklärung unterhalb der Beschriftung oder unterhalb des Eingabefeldes anzeigen. Um diese Anweisungen zugänglich zu machen, müssen sie im Code als ARIA-Beschriftungen deklariert werden. Andernfalls werden sie von unterstützenden Technologien nicht richtig als Anweisungen erkannt.

Eine Möglichkeit wäre, die Anweisungen direkt unter der Beschriftung, aber oberhalb des Eingabefeldes zu platzieren, damit sie von der assistiven Technologie zuerst gelesen werden. Dies hilft auch dabei, den Klickbereich zu vergrößern.

Tipp 6: Anweisungen als Platzhalter müssen lesbar sein

Platzhaltertext im Eingabefeld, der dem Benutzer vorschlägt, was er eingeben soll. Dieser Text hat oft einen geringeren Farbkontrast als die Beschriftungen oder der Text, den der Benutzer eingibt. Und der Platzhaltertext verschwindet aus dem Eingabefeld, wenn ein Benutzer das Feld aktiviert. 

Wenn der Platzhaltertext eine wichtige Anweisung enthält, ist es für die Benutzer schwieriger, das Formular zu überprüfen, bevor sie es absenden. Oft können unterstützende Technologien Platzhalter nicht richtig lesen, und ältere Browser zeigen sie gar nicht an. Der Platzhalter ist KEIN Ersatz für Labels. 

Außerdem haben Platzhaltertexte oft einen Farbkontrast, der nicht den WCAG-Richtlinien entspricht. Das macht sie schwer lesbar. Das World Wide Web Consortium (W3C) empfiehlt die Verwendung des folgenden Farbcodes für Platzhaltertext: #767676, wenn die Hintergrundfarbe weiß ist.

Tipp 7: Pflichtfelder deutlich kennzeichnen

Für viele Menschen ist ein Sternchen in einer Beschriftung oder nach einem Eingabefeld gleichbedeutend mit einem Pflichtfeld. Aber nicht für alle. Es wird immer Menschen geben, die das nicht wissen oder nicht verstehen. Deshalb ist es wichtig, in den Anweisungen über dem Formular anzugeben, wie der Benutzer Pflichtfelder erkennen kann.

Obligatorische Felder können mit einem Sternchen (*) gekennzeichnet oder in Klammern "(obligatorisch)" geschrieben werden. Darüber hinaus kann es laut NNGroup auch sinnvoll sein, sowohl obligatorische als auch optionale Felder zu markieren. 

Dies kann jedoch zu einer höheren kognitiven Belastung führen, da mehr textliche Klammern vorhanden sind. Das UX Collective plädiert daher dafür, in Formularen besser zu kennzeichnen, welche Felder optional sind, indem man sie mit '(optional)' markiert. Dies setzt allerdings voraus, dass das Formular eine klare Einleitung mit Anweisungen enthält. Zum Beispiel: "Alle Felder sind Pflichtfelder, es sei denn, sie sind mit 'Optional' gekennzeichnet.

In einer Studie stellt der UX-Experte Luke Wroblewski fest, dass das Wort 'Optional' besser abschneidet als ein visueller Hinweis wie ein Sternchen *. Die Nutzer nahmen das Formular positiver wahr, als wenn Pflichtfelder nur mit einem Sternchen gekennzeichnet waren.

Wenn es viele Pflichtfelder gibt, kann es für den Benutzer schwierig sein, die optionalen Felder zu erkennen. Daher empfiehlt die UX-Expertin Jessica Enders, nur die optionalen Felder hervorzuheben und kein Sternchen zu verwenden (Designing UX Forms, 2016, S. 171);

Welche ist die richtige Antwort? Die Pflichtfelder oder die optionalen Felder angeben?

Aus der Eyetrack-Studie von Seckler, Heinz, Bargas-Avila et al (2014) geht hervor, dass es ohnehin notwendig ist, zwischen Pflicht- und optionalen Feldern zu unterscheiden.

Letztendlich geht es darum, es für den Benutzer klar und einfach zu machen. Seien Sie daher im Formular konsistent, wählen Sie einen Weg, um Pflichtfelder oder optionale Felder anzugeben, und geben Sie in der Einleitung an, wie der Benutzer das Formular ausfüllen soll;

Farbe und Kontrast für Pflichtfelder

Sollte ein Sternchen rot sein? Das ist nicht notwendig, aber üblich. Es ist wichtig, dass nicht die Farbe allein anzeigt, dass etwas wichtig oder obligatorisch ist. Wenn man etwas nur mit Farbe anzeigt, können farbenblinde Menschen den Hinweis völlig übersehen.

Benachrichtigungen und Fehlermeldungen

Stellen Sie sicher, dass Benachrichtigungen und Fehlermeldungen leicht zu verstehen sind. Geben Sie den Besuchern klare und einfache Anweisungen, wenn etwas gelöst werden muss. Wenn ein Formular erfolgreich abgeschickt wurde, sollte der Nutzer eine Rückmeldung erhalten, dass es erfolgreich war.

Fehler- oder Erfolgsmeldungen werden am besten durch Seitenüberschriften kommuniziert. Warum ist das so? Wenn die Seite nach dem Absenden des Formulars neu geladen wird, beginnt die Hilfetechnologie wieder ganz oben auf der Seite. Auf diese Weise erhält der Benutzer eine sofortige Benachrichtigung darüber, dass das Absenden des Formulars fehlgeschlagen ist. Anzeige von Fehlern oder Erfolgen in der H1 oder H2, zum Beispiel:

• <H1> 3 Fehler - Kontaktformular </H1>

• <H1> Danke! Ihre Bestellung wird sofort bearbeitet </H1>

Erleichtern Sie den Benutzern die Arbeit, indem Sie vor dem Start des Formulars eine Zusammenfassung der Fehlermeldungen anzeigen;

• Geben Sie der Zusammenfassung einen eindeutigen Titel

• Verweisen Sie auf das Etikett, bei dem der Fehler aufgetreten ist

• Beschreiben Sie klar und deutlich, was schief gelaufen ist

• Erläutern Sie, wie der Benutzer den Fehler beheben kann, einschließlich aller Formatanforderungen

• Verknüpfen Sie mit dem entsprechenden Eingabefeld, damit der Benutzer den Fehler direkt beheben kann

Zeigen Sie dem Benutzer sofort, ob das, was er eingegeben hat, den Anforderungen des Eingabefeldes entspricht. Zum Beispiel mit einem Häkchen ✓ und einem grünen Rahmen. Fehler können Sie z. B. mit einem roten ✗ oder einem Ausrufezeichen und einem roten Rahmen um das Eingabefeld anzeigen.

Machen Sie es dem Benutzer besonders leicht, indem Sie auch direkt angeben, was schief gelaufen ist und wie er es beheben kann. 

Es kann auch sinnvoll sein, ein automatisches Feedback anzubieten, damit die Nutzer sofort wissen, ob die von ihnen gemachten Angaben richtig oder möglich sind. Zum Beispiel bei der Auswahl eines Benutzernamens. Auf diese Weise muss der Nutzer das Formular nicht mehrmals abschicken, um zu prüfen, ob sein gewünschter Benutzername verfügbar ist.

Beispiel für Ikea-Fehlermeldungen

Beim Anlegen eines neuen Kontos bei IKEA werden die Anforderungen an das Passwort nicht einmal auf dem Bildschirm angezeigt, sondern erst, wenn man mit der Eingabe beginnt. Das kann zu Frustration führen, weil es für den Nutzer so aussieht, als ob er bereits etwas falsch gemacht hat, noch bevor er es vollständig ausgefüllt hat. Es kann auch zu Zweifeln führen.

Machen Sie das Formular handhabbar

Tipp 11: Unterteilen Sie das Formular in Schritte

Wenn ein Formular lang ist, kann es für die Benutzer hilfreich sein, das Formular in kürzere Schritte zu unterteilen. Dadurch wird das Formular weniger überwältigend und leichter zu verstehen.

Das gilt vor allem für Menschen, die zum Beispiel weniger Erfahrung mit Computern haben. Oder Menschen mit kognitiven Einschränkungen. 

Wie geht man dabei am besten vor? 

• Der erste Schritt im Formular sollte angeben, aus wie vielen Schritten das Formular besteht

• Jeder Schritt sollte auch angeben, wie weit der Benutzer im Formular ist

• Ändern Sie den Titel der Seite, um den Fortschritt deutlich zu machen

• Wiederholen Sie die übergreifenden Anweisungen für jede Seite/Schritt

• Erleichtern Sie das Überspringen optionaler Eingabefelder

Tipp 12: Verwenden Sie kein Zeitlimit

Die Benutzer sollten die Möglichkeit haben, ein Formular in ihrem eigenen Tempo auszufüllen. Verwenden Sie daher kein Zeitlimit für Ihre Formulare. Wenn es aus Sicherheitsgründen notwendig ist, ist es wichtig, dem Benutzer die Möglichkeit zu geben, es auszuschalten oder zu verlängern. 

Dies gilt nicht für Veranstaltungen, Auktionen oder Spiele, bei denen die Zeit eine wichtige Rolle spielt.

Achten Sie darauf, dass neben der Schaltfläche "Senden" keine Schaltfläche "Zurücksetzen" angezeigt wird. Die Wahrscheinlichkeit, dass ein Benutzer falsch klickt, ist sehr hoch. Wie Jessica Enders sagt, gibt es keinen besseren Weg, Ihre Nutzer zu frustrieren, als wenn sie versehentlich alle eingegebenen Informationen löschen.

"Es gibt keinen sichereren Weg, Ihre Nutzer zu frustrieren, als ihnen die Möglichkeit zu geben, ihre eigenen Informationen zu löschen!" Jessica Enders (2016)

Tipp 13: Zusätzliche Prüfung vor dem Versand

Am Ende eines komplexen Formulars ist es ratsam, eine kurze Zusammenfassung dessen zu geben, was der Nutzer ausgefüllt hat. Auf diese Weise wird er nicht daran zweifeln, ob das Formular vor dem Absenden richtig ausgefüllt wurde.