Fast jede Internetseite besitz eins: ein Kontaktformular. Häufig gesellen sich noch andere Formulare dazu: ein Checkout im Online-Shop oder das Bewerbungsformular auf dem Firmenauftritt. Wenn Sie Ihre Zielgruppe möglichst vollständig ansprechen wollen, dann sollten Sie insbesondere hier auf Barrierefreiheit achten. Dabei bieten ausgerechnet Formulare viele Stolpersteine, an denen ein Nutzer verzweifeln könnte und Ihnen so möglicherweise ein Kunde verloren geht. Und weil das so viele sind, gibt es hier den Bruchteil einer Checkliste. Wie ich in meiner kurzen Einführung zur Barrierefreiheit beschrieben habe, existieren vier Säulen der Barrierefreiheit:
- Wahrnehmbarkeit
- Bedienbarkeit
- Verständlichkeit
- Robustheit
Formulare eignen sich sehr gut, um zu zeigen, dass in die Barrierefreiheit einer einzelnen Komponente alle vier dieser Prinzipien einzahlen. Gehen wir sie deshalb doch einmal einzeln durch und ich versuche zu jedem Punkt kurz zu erklären, wieso das wichtig ist.
Wahrnehmbarkeit – Formulare müssen sichtbar sein
Damit Ihre Nutzer Sie erreichen können müssen das Formular und seine Eingabefelder für sie als solche wahrnehmbar sein. Denken Sie hier nicht nur optisch, sondern auch daran, ob ein Nutzer von Assistenzsystemen ihr Formular finden würde.
- Formulare werden mit dem <form>-Tag ausgezeichnet.
Grund: Browser und Screenreader können es so als Formular erkennen und entsprechende Tastaturkürzel anbieten. - Eingabefelder haben einen ausreichenden Kontrast zum Hintergrund, beispielsweise über eine Kontur.
Grund: Eingabefelder können nur dann ausgefüllt werden, wenn diese auch gefunden werden. In modernen Webdesigns verschmelzen diese oft fast mit dem Hintergrund. - Das fokussierte Inhaltselement wird klar hervorgehoben.
Grund: Innerhalb eines Formulars navigieren auch sehende Nutzer oft mit der Tabulator-Taste und springen so von einem Eingabefeld zum nächsten. Es muss klar sein, welches Feld gerade aktiv ist um dem Nutzer die Eingabe zu vereinfachen. - Die Farbkontraste erfüllen die Mindestanforderungen.
Grund: Der Kontrast von Eingaben und Beschriftungen wird meistens gut umgesetzt. Was aber oft vergessen wird, sind die Platzhaltertexte, also die Beschriftungen innerhalb der Felder, die bei einer Eingabe verschwinden. Diese sind oft so blass dargestellt, dass sie fast völlig unsichtbar sind. Für deaktivierte Felder ist dies aber wiederum ok, denn was eh nicht benutzt werden kann, das muss auch nicht gut sichtbar sein. Gerade bei Elementen, mit denen Nutzer interagieren sollen ist ein starker Kontrast wichtig. - Die Eingabefelder skalieren mit der Schriftgröße.
Grund: Nutzer mit Sehbeeinträchtigungen erhöhen oft die Schriftgröße um sich das Lesen zu vereinfachen oder überhaupt zu ermöglichen. Eingabefelder müssen sich an diese Schriftgrößen anpassen, damit keine Eingaben abgeschnitten werden.
Bedienbarkeit – Formulare auch auf Tastaturbedienbarkeit prüfen
Bedienbar ist ein Formular nur dann, wenn es von allen Nutzern verwendet werden kann. Dazu zählen auch Nutzer von Tastatureingaben. Testen Sie ihr Formular deshalb am besten einmal selbst ohne die Maus zu verwenden.
- Die Tabulatorreihenfolge entspricht der sichtbaren Reihenfolge von oben links nach unten rechts.
Grund: Wie bereits erwähnt, verwenden auch sehende Nutzer oft die Tabulator-Taste um von einem Feld ins nächste zu springen. Noch vor dem Klick erwartet man unbewusst, wo man als nächstes landet. Liegt der Fokus dann unerwartet in einem anderen Feld, kann es zu Fehleingaben kommen. - Jedes Eingabefeld verfügt über ein technisch zugeordnetes Label.
Grund: Navigieren Nutzer von Screenreadern von einem Eingabefeld zum nächsten, dann werden die Zwischentexte übersprungen und von allein nicht vorgelesen. Eingabefelder benötigen deshalb ein Label, welches vorgelesen werden kann. - Button zum Absenden des Formulars ist korrekt als type=“submit“ ausgezeichnet, der Button zum Zurücksetzen als type=“reset“.
Grund: Werden die Buttons richtig im Quelltext ausgezeichnet, dann erkennt der Browser diese Rollen und setzt die entsprechenden Aufgaben ohne eine eigene Logik um. Außerdem kann das Formular mit einem Klick auf die Enter-Taste direkt abgesendet werden.
Verständlichkeit – Wissen die Nutzer, was abgefragt wird?
Versuchen Sie, Fehler zu vermeiden, indem Sie Nutzern deutlich machen, was sie von ihnen erwarten.
- Pflichtfelder werden sichtbar und unsichtbar gekennzeichnet.
Grund: Wenn die Nutzer nicht klar erkennen, welche Felder Pflichtfelder sind, dann kommt es zu Fehlangaben. Für sehende Nutzer hat sich dazu ein * am Label etabliert. Häufig werden Pflichtfelder aber auch mit einem kräftigeren Schriftschnitt oder einem höheren Kontrast deutlich gemacht. In der Audioausgabe bekommt man diesen Stern zwar vorgelesen, weiß aber womöglich nicht intuitiv was er bedeuten soll. Markieren Sie das Eingabefeld deshalb unbedingt auch technisch als Pflichtfeld. Dazu eignet sich das Attribut „required“ . - Alles, was ich erfahren will ist beschriftet – und nur das.
Grund: Eine klassische Kombination im Checkout ist es, nach der Straße und Hausnummer eines Kunden zu fragen. Dies kann in einem oder zwei Eingabefeldern geschehen, aber das muss auch aus den Feldbeschriftungen klar sein. Stellen Sie sich den Nutzer eines Screenreaders vor, der beim ersten Eingabefeld, der Straße, ankommt. Wie müsste dieses Feld beschriftet sein um klar zu machen: die Hausnummer ist nicht gefragt? - Geeignete Felder nutzen die Automatische Vervollständigung des Browsers mithilfe von autocomplete.
Grund: Felder immer wieder mit den gleichen Informationen zu befüllen ist anstrengend. Und immer dann, wenn Nutzern eine Aufgabe unangenehm ist, schwindet die Konzentration und es passieren Fehler. Nehmen Sie dem Nutzer deshalb so viel Arbeit ab, wie möglich, und lassen Sie Ihr Formular vom Browser mit gespeicherten Namen und Adressen befüllen.
Robustheit – Wie gehen die Formulare mit Fehlern und anderen Situationen um?
Wo Formulare ausgefüllt werden passieren Fehler. Diese sollten jedoch nicht nur vermieden werden sondern auch möglichst robust validiert und dem Nutzer ausgegeben werden. Das heißt, ein falsch verwendetes Formular sollte nie zu einer Situation führen, in der der Nutzer nicht weiß, wie er zu reagieren hat. Dies sollte für alle Ein- und Ausgabegeräte gelten. Hier einige Beispiele.
- Alle Formularfelder, Buttons und Fehler sind immer zu sehen.
Grund: Vor allem auf kleinen Bildschirmen wie Mobiltelefonen passiert es schnell, dass Inhalte abgeschnitten werden. Achten Sie darauf, dass Ihre Internetseite bei jeder Auflösung bedient werden kann. Nur so können die Nutzer sehen, was als nächstes von Ihnen erwartet wird. Auch für Screenreader sollten die relevanten Felder „sichtbar“ sein. Prüfen Sie dies am besten einmal selbst. - Fehler werden für Screenreader lesbar ausgegeben.
Grund: Im sogenannten Formularmodus springen Screenreader von Eingabefeld zu Eingabefeld. Dazwischen stehende Informationen, wie Fehlermeldungen, werden dabei oft nicht ausgegeben. Nutzen Sie hier gern ARIA-Attribute, um eine Verknüpfung herzustellen. - Fehlermeldungen machen deutlich was geändert werden muss.
Grund: Oft sind Validierungen von Formularen sehr generisch und geben dem Nutzer Informationen wie „Es trat ein Fehler auf“ aus. Das ist zwar nicht verkehrt, hilft dem Anwender aber nicht, seinen Fehler zu finden. Versuchen Sie deshalb möglichst genau zu beschreiben, worin der Fehler lag. Wurde keine gültige E-Mail-Adresse eingegeben, war das Feld ganz leer oder lehnt ihr Formular die Adresse aus Sicherheitsgründen ab? - Das Formular ist so tollerant und inklusiv wie Sie.
Grund: Werden Validierungen zu streng gesehen, dann frustriert das. Ich bin schon an Checkouts gescheitert, die der Meinung waren, dass meine (völlig korrekte) Adresse nicht stimmen kann weil sie die in ihrer Datenbank nicht gefunden haben. Oder die „Straße“ unbedingt mit „Str.“ abkürzen wollten. So verliert man Kunden. Pakete werden auch an Adressen mit Tippfehlern zugestellt, Telefonnummern kann man problemlos automatisch neu formatieren und Leerzeichen entfernen.
Fazit
Wie man sieht, sind wirklich barrierefreie Formulare eine Mammutaufgabe und ich finde Blogüberschriften wie „Alles was Sie über barrierefreie Formulare wissen müssen“ eine dreiste Lüge. Denn ein Formular in allen Aspekten so zu gestalten, dass es von jedem verwendet werden kann, passt inhaltlich einfach nicht in einen Blogbeitrag. Wenn ich Ihnen dabei helfen soll, Ihr Formular zu überarbeiten, dann schreiben Sie mich einfach an.