Wie werden Formularelemente barrierefrei gestaltet?

Jeder hat schon einmal mit Formularen zu tun gehabt. Früher mehr auf Papier. Heute sind es immer mehr digitale Formulare, denn sie dienen der Interaktion des Nutzers mit einer Webseite. Sei es bei der Kommunikation im Internet oder bei der Bestellung eines Artikels, man findet sie überall. Auch die Suche im Internet, zum Beispiel mit Google, ist davon betroffen. Das Ausfüllen dieser Formulare ist für Menschen mit körperlichen oder auch kognitiven Einschränkungen sowie für blinde und sehbehinderte Menschen erschwert. Um allen Menschen die Teilhabe am öffentlichen Leben zu ermöglichen, müssen diese Formulare barrierefrei gestaltet werden. Aber: Wie erstellt man eigentlich barrierefreie Formularelemente?

Dafür gibt es verschiedene Techniken. Bevor man sich jedoch mit den Techniken beschäftigt, sollte man die Formularelemente kennen. Diese lassen sich nämlich in verschiedene Typen einteilen. Es gibt unter anderem folgende Typen

• einzeilige Eingabefelder

• mehrzeilige Eingabebereiche

• Auswahllisten

• Radiobuttons

• Checkboxen

• Buttons zum Absenden/Abbrechen

Beschriftung von Formularfeldern

Um Barrierefreiheit in Formularen zu erreichen, müssen die verschiedenen Steuerelemente beschriftet werden. Diese Beschriftungen ermöglichen es assistierenden Technologien, die Funktionen der Steuerelemente zu erkennen und an den Benutzer weiterzugeben. Es ist wichtig, dass die Beschriftungen eindeutig mit den Steuerelementen verknüpft sind, da Screenreader sonst nicht in der Lage sind, eine Verbindung zu den Elementen herzustellen. Dies hat zur Folge, dass die Benutzer Schwierigkeiten haben, das Formular zu verstehen. Sie können nicht erkennen, welche Informationen in welche Felder eingegeben werden müssen. Dadurch können sie das Formular nicht korrekt ausfüllen und machen häufig Fehler. Die Beschreibungen sind jedoch nicht alle gleich beschriftet. Entscheidend ist, ob sie für alle sichtbar sein sollen oder nicht. In der Programmiersprache HTML wird deshalb zwischen dem label-Element und den aria-Attributen unterschieden. Das label-Element wird für Eingabefelder, Auswahllisten, Radiobuttons und Checkboxen verwendet und muss entsprechend platziert werden. Bei Eingabefeldern und Auswahllisten steht das label vor den Steuerelementen. Bei Radiobuttons und Checkboxen hingegen werden sie nach dem Steuerelement platziert. Damit die labels auch mit dem entsprechenden Element verknüpft werden können, muss noch das for-Attribut hinzugefügt werden.

Das aria-Attribut wird in HTML für Schaltflächen verwendet. Buttons können z.B. in einem Formular das Absenden oder Abbrechen darstellen. Durch aria-Attribute werden die Beschreibungen der jeweiligen Elemente nur für assistive Technologien erkennbar. Sie können daher auch für Eingabefelder verwendet werden, die nur für den Screenreader sichtbar sein sollen. Es gibt viele aria-Attribute, die zur Verbesserung der Barrierefreiheit im Internet eingesetzt werden. Diese unterscheiden sich jedoch in ihrer Art und Funktion. Für die Beschriftung eines Elements wird das sogenannte aria-label verwendet. Natürlich ist es auch möglich, dasselbe label für mehrere Elemente zu verwenden. Dies wird durch ein aria-labelledby ermöglicht.

Ein- und Mehrzeilige Eingabefelder

Eingabefelder gehören zu den am häufigsten verwendeten Elementen in Formularen. Sie können ein- oder mehrzeilig sein. Einzeilige Felder werden für kurze Abfragen verwendet, z. B. für den Namen einer Person, eine E-Mail-Adresse, eine Straße oder einen Ort.

Sie werden in HTML mit dem input-Tag und dem type-Attribut erzeugt.

Zusätzlich können weitere Attribute hinzugefügt werden, die z.B. die Zeilenlänge definieren.

Mehrzeilige Felder werden in der Regel für größere Textbereiche wie Textnachrichten verwendet. Diese werden dann mit dem textarea-Tag erzeugt. Auch hier kann der Entwickler die Anzahl der Zeilen und die Zeilenlänge festlegen. Damit diese Felder jedoch barrierefrei zugänglich sind, muss noch das label-Tag hinzugefügt werden. Es ist jedoch nicht möglich, eine Verbindung zwischen dem label und den Elementen herzustellen, wenn diese nicht eindeutig zugeordnet sind. Diese müssen dann über das for-Attribut und das id-Attribut miteinander verknüpft werden. Im nachfolgenden HTML-Beispiel werden einfache labels in solche Eingabefelder implementiert.

<label for=“vorname“>Ihr Vorname: </label>

<input type“text“ name=“vorname“ id=“vorname“ />

<br />

<label for=“nachricht“>Ihre Nachricht: </label>

<textarea name=“nachricht“ id=“nachricht“> </textarea>

Hier wird zunächst ein einzeiliges Eingabefeld für den Vornamen mit dem Typ “text“ erzeugt. Die Beschriftung „Ihr Vorname:“ wird durch das label-Element für alle sichtbar gemacht. Dieses steht vor dem input-Element, da es vor dem Eingabefeld ausgegeben wird. Über das for-Attribut im label-Tag und das id-Attribut im input-Element werden diese Bereiche miteinander verknüpft. Wichtig ist hierbei, dass beide Inhalte identisch sind, da sie sonst nicht verknüpft werden können. Das name-Attribut dient dabei als Identifikator für dieses Feld und wird für die Übertragung der Daten an eine Server-Seite benötigt.

Als nächstes wird mit dem Tag „textarea“ ein mehrzeiliger Eingabebereicherzeugt. Hier erscheint dann über das label-Element die Beschriftung „Ihre Nachricht:“. Auch hier werden die beiden Bereiche mit dem gleichen Textinhalt über die Attribute for und id miteinander verbunden.

Allgemeine Hinweise

Im Allgemeinen sollten Formulare klar und eindeutig sein. Vorhersehbarkeit ist ebenfalls sehr hilfreich. So können die Benutzer schnell erkennen, was von ihnen verlangt wird. Eine klare und sinnvolle Struktur ist ebenfalls sehr wichtig. Zusammengehörige inhaltliche Elemente können gruppiert werden. Logisch getrennte Einheiten können auch optisch getrennt werden. Das erleichtert die Orientierung. Zusätzlich können sie farblich voneinander abgesetzt werden. Wichtig ist, dass der Mindestkontrast von 4,5:1 eingehalten wird.

Tastaturbedienbarkeit

Eines der wichtigsten Merkmale für die barrierefreie Gestaltung von Formularfeldern ist die Bedienbarkeit über die Tastatur. Es gibt Menschen, die aufgrund ihrer Behinderung nicht in der Lage sind, eine Maus zu bedienen. Umso wichtiger ist es, Formulare so zu gestalten, dass auch mit der Tastatur navigiert werden kann. Die Verwendung von label-Elementen und aria-Attributen erleichtert das Verständnis und die Bedienung von Formularen. Eine weitere Möglichkeit, die Bedienung über die Tastatur zu vereinfachen, ist die Verwendung von Tastaturkürzeln. Hier können Formularelemente mit Tastenkombinationen hinterlegt werden. Dies kann helfen, bestimmte Bereiche schneller zu erreichen oder auch Funktionen schneller zu bedienen. Dazu wird das accesskey-Attribut in HTML verwendet. Dieses Attribut wird bei dem Element eingefügt, für das es verwendet werden soll. Dort wird einfach die Taste zugewiesen, die dann für den Tastaturbefehl verwendet wird. Weist man also z.B. einem Feld oder einer Schaltfläche die Taste „n“ zu, so kann diese in Windows mit dem Tastaturkürzel (Alt + n) bedient werden.

Es ist jedoch darauf zu achten, dass dieses Tastenkürzel nicht bereits für einen anderen Befehl im Browser verwendet wird.

Reduzierung auf das Minimum

Ebenso empfiehlt es sich, das Ganze auf das Wesentliche zu reduzieren, um Menschen mit Behinderungen nicht unnötig zu belasten. Es sollten daher nur die unbedingt erforderlichen Daten abgefragt werden. Auf die Abfrage bereits vorhandener Daten sollte verzichtet werden. Zusätzlich kann die Sichtbarkeit von Formularfeldern der Situation angepasst werden. Optionale Eingabefelder oder Felder, die an Bedingungen geknüpft sind, müssen nicht sichtbar sein. Sie können angezeigt werden, wenn sie benötigt werden. So macht z.B. die Abfrage des Alters von Kindern keinen Sinn, wenn zuvor ausgewählt wurde, dass keine Kinder vorhanden sind.

Hilfestellungen und Fehlermeldungen

Zusätzlich sollte eine Eingabehilfe angeboten werden. Dies kann in Form eines Dialogfensters oder eines Tooltips geschehen. Mit deren Hilfe kann die Eingabe näher erläutert werden. Eine weitere Möglichkeit wäre die Verlinkung auf eine eigene Hilfeseite. Dies würde die Erfolgsquote enorm erhöhen. Fehler passieren trotzdem. Wichtig sind dann sinnvolle Fehlermeldungen. Wenn zum Beispiel beim Login das Passwort falsch eingegeben wurde, sollte nicht die Meldung „Benutzername oder Passwort ist falsch“ erscheinen. Besser ist es, den Fehler zu filtern. Korrekt wäre hier: „Das eingegebene Passwort ist nicht korrekt. Bitte geben Sie das korrekte Passwort ein“. 

Es gibt verschiedene Arten von Fehlern. Zunächst der Formatfehler. Hier wird das Passwort im falschen Format eingegeben. Zum Beispiel werden Buchstaben statt Zahlen eingegeben. Auch Wertefehler können auftreten. Dies kann passieren, wenn trotz gültigem Format ein falscher Wert eingegeben wurde. Ein Beispiel hierfür wäre die Eingabe des Wertes 34 für einen Tag des Datums. Die Meldung würde dann beispielsweise lauten: „Der Monat März hat 31 Tage. Bitte geben Sie den Tag erneut ein“.

Eine weitere Fehlerart sind ungültige Eingaben. Hier gibt der Entwickler Werte vor, die ungültig sind. Zuletzt gibt es noch die Fehlerart, wenn bei Pflichtfeldern keine Eingabe gemacht wurde. Dies kommt zum Beispiel vor, wenn es sich bei der Abfrage der Emailadresse um ein Pflichtfeld handelt und hier die Eingabe vergessen wurde. Oft passiert dies aber auch bei den Allgemeinen Geschäftsbedingungen. Auf vielen Webseiten kommt man ohne die Zustimmung zu dieser Erklärung nicht weiter.

Pflichtfelder

Formulare enthalten oft Pflichtfelder. Diese müssen als solche gekennzeichnet sein. Ein häufig verwendetes Symbol zur Kennzeichnung eines Pflichtfeldes ist ein „*“, das neben dem Formularfeld angezeigt wird. In diesem Fall sollte jedoch bereits am Anfang des Formulars darauf hingewiesen werden, dass die mit einem Stern gekennzeichneten Felder Pflichtfelder sind. Eine weitere Möglichkeit besteht darin, diese Pflichtfelder in einer anderen Farbe oder Schattierung darzustellen. Diese sind jedoch nicht für jeden zugänglich. Damit auch Screenreader-Nutzer sie erkennen können, sollte zusätzlich das Attribut required oder aria-required verwendet werden. Damit wird dem Screenreader mitgeteilt, dass es sich um ein Pflichtfeld handelt.

Platzhalter

Eine Möglichkeit, Formulare noch verständlicher und benutzerfreundlicher zu gestalten, ist die Verwendung von Platzhaltern in Formularfeldern. Platzhalter sind temporäre Texte, die innerhalb eines Formularfeldes angezeigt werden, um dem Benutzer anzuzeigen, welche Art von Informationen eingegeben werden soll. Diese Texte verschwinden, sobald auf das Formularfeld geklickt oder es fokussiert wurde, und können durch den tatsächlichen Inhalt des Formularfelds ersetzt werden. Platzhalter können einfach in das HTML-Eingabeelement eines Formularfeldes eingefügt werden, indem das Attribut placeholder verwendet wird.

Eingaben speichern

Alle Benutzer sollten die Möglichkeit haben, ihre Eingaben zu speichern. Bei längeren Formularen kommt es immer wieder zu Problemen. Um hier Datenverluste zu vermeiden, können diese gespeichert werden. Dazu kann ein Button implementiert werden, der den aktuellen Stand speichert. Dies erleichtert dann das Ausfüllen komplexer Formulare. Dies hat auch den Vorteil, dass fehlende Eingaben zu einem späteren Zeitpunkt ergänzt werden können. Denn eine Wiederholung dieser Eingaben führt dazu, dass einige Nutzer das Formular nicht weiter ausfüllen. Dies kann sowohl für den Betreiber einer Website als auch für den Benutzer ärgerlich sein.

Authentifizierung und Zeitlimit

Authentifizierung erhöht die Sicherheit im Internet. Sie ist aber auch eine der Barrieren, die immer wieder auftauchen. Diese treten häufig auf Webseiten auf, wo ein Login erforderlich ist. Damit diese aber für alle zugänglich sind, müssen Formulare barrierefrei gestaltet werden. Denn in vielen Fällen sind die Authentifizierungsverfahren zeitlich begrenzt. Man hat dann nur sehr wenig Zeit, sich einzuloggen. Oft sind es nur 30 oder 60 Sekunden. Für viele Menschen mit Einschränkungen reicht diese Zeit nicht aus, um sich einzuloggen. Daher ist es wichtig, die Eingabe nicht durch eine Zeit zu begrenzen.

Ein weiteres Problem stellen Captchas dar. Sie dienen dazu, den Nutzer als Menschen und nicht als Computer zu identifizieren. Hier wird der Nutzer aufgefordert, ein verzerrtes Bild zu identifizieren und das Ergebnis in ein Formularfeld einzutragen. Häufig müssen aber auch alle Bilder angeklickt werden, auf denen beispielsweise ein Auto zu sehen ist. Diese sind jedoch nicht immer barrierefrei. Blinde oder sehbehinderte Menschen können diese Bilder nicht erkennen. Um diese Barriere zu umgehen, sollte eine Audiomöglichkeit angeboten werden.

Zusammenfassend lässt sich sagen, dass die barrierefreie Gestaltung von Formularfeldern ein wichtiger Schritt auf dem Weg zu einer barrierefreien digitalen Umgebung ist. Die Verwendung korrekter Bezeichnungen, ein klarer und strukturierter Aufbau sowie die Bedienung über die Tastatur und entsprechende Fehlermeldungen erhöhen die Wahrscheinlichkeit, dass auch Menschen mit Behinderungen die Formulare selbstständig ausfüllen können.