Wir starten bei null, damit du auch von Grund auf verstehst, wie ein Kontaktformular strukturiert und gestaltet werden muss, um so barrierearm wie möglich zu sein.
Ein barrierefreies Kontaktformular erstellen: Der Überblick.
Damit dein Kontaktformular barrierefrei wird, muss es zwei Dinge erfüllen:
- Für alle Nutzenden verständlich sein
- Mit assistiven Technologien (zum Beispiel mit Screenreader) zu bedienen sein.
Um das zu erreichen, müssen wir uns folgende drei Punkte genauer anschauen:
- Verständlichkeit: Wie schaffen wir es, dass Nutzende das Formular bestmöglich verstehen?
- Feedback: Wie lassen wir den Nutzenden wissen, dass er etwas richtig oder falsch gemacht hat?
- HTML-Semantik: Wie machen wir das Formular für assistiven Technologien zugänglich?
In diesem Artikel werden wir uns nur um die Verständlichkeit des Formulars kümmern. Wie wir es für assistive Technologien optimieren, darauf gehen wir in dem Beitrag für Entwickler ein.
Wir wissen: Designer lieben Bilder! Darum werden wir den ganzen Prozess anschaulich mit Beispielen bebildern. Unser erstes Bild: So sieht unser Beispiel-Kontaktformular aus. Dieses werden wir jetzt Schritt für Schritt barrierearm machen!
Ein Hinweis: Es gibt mehrere Herangehensweisen, um Formulare barrierefrei zu machen. Wer ganz spezielle Fragen hat oder alles im Detail wissen will, der erfährt auf der Seite der W3C noch mehr: Die offizielle Anleitung der W3C zu barrierefreien Formularen (englisch)
Schritt 1, um ein barrierefreies Kontaktformular zu erstellen: Die Verständlichkeit verbessern
Um ein barrierefreies Kontaktformular zu erstellen, müssen wir uns zuerst darum kümmern, wie wir unser Formular so optimieren können, dass Nutzende es schnell und leicht verstehen.
a) Beschreibe die Eingabefelder
Zuallererst ist es Voraussetzung der WCAG für digitale Barrierefreiheit, dass Eingabefelder richtig beschriftet sind.
Neben der visuellen Beziehung, die für sehende Personen entsteht, ist ein Label besonders für Screenreader wichtig. Platzhalter-Texte werden nicht von allen Screenreadern vorgelesen und auch nicht von jedem Browser richtig interpretiert. Außerdem verschwinden viele Platzhalter-Texte, wenn man anfängt, Text einzutippen. Das kann dazu führen, dass Nutzende vergessen, was in das Feld eintragen werden soll. Deswegen brauchen wir ein Label, dass das Eingabefeld klar beschreibt.
So sieht unser Formular aus, nachdem wir Labels zu den Eingabefeldern hinzugefügt haben. Auch der Button braucht übrigens ein Label, aber das ist im HTML “versteckt”.
b) Hebe die Pflichtfelder deutlich hervor
Nachdem wir unsere Eingabe-Felder beschriftet haben, wollen wir den Nutzenden auch zeigen, welche Eingabe-Felder verpflichtend sind.
Gute UX versucht darauf zu verzichten, Nutzende erst einen Fehler machen zu lassen, um ihnen dann zu sagen, dass sie einen Fehler gemacht haben. Wir wollen von vorneherein mögliche Fehlerquellen vermeiden. Deswegen müssen wir klare Hinweise geben, welche Felder Pflichtfelder sind.
Oft reicht da der beliebte Stern (*) nicht aus, da er tatsächlich von vielen Nutzenden übersehen wird bzw. auch von Screenreadern nur als “Asterisk” vorgelesen wird, ohne Bedeutung. Es ist besser, in den Beschriftungen der Eingabe-Felder darauf hinzuweisen, was ein Pflichtfeld ist und was nicht.
Das heißt, dass wir als Beschriftung zum Beispiel angeben: “Vorname (Pflichtfeld)”.
Das sieht in unserem Beispiel dann wie folgt aus.
Wie wir sehen, ist diese Herangehensweise allerdings ein wenig kontraproduktiv. Wie es der UX-ler Adam Silver in seinem Blog-Eintrag hervorragend formuliert:
“Gut gestaltete Formulare vermeiden in der Regel optionale Felder. Das bedeutet, dass optionale Felder selten sein sollten. Und da der Sinn einer Hervorhebung wie ‘Pflichtfeld’ darin besteht, die Aufmerksamkeit auf das zu lenken, was anders ist, ist es besser, optionale Felder zu markieren.
Es ist also besser ‘optional’ also Beschriftung für ein Input-Feld hinzuzufügen. So können wir minimale Ablenkung und maximale Klarheit schaffen.”
Link zum Blog von Adam Silver über Form-Felder (englisch)
Darum werden auch wir die ganze Sache umdrehen und nur die optionalen Felder beschriften.
c) Gebe Hinweise, wie die Eingabefelder auszufüllen sind
Es ist extrem nervig, wenn man ein Formular ausfüllt und erst im Nachhinein erfährt, worauf man hätte achten sollen. Wir kennen das alle von Passwort-Feldern, die uns erst im Nachhinein sagen, dass das Passwort mindestens 8 Zeichen lang sein soll oder ein Sonderzeichen enthalten muss.
Wie oben schon erwähnt, wollen wir Fehler vermeiden, deswegen sollten wir den Nutzenden im Hinweistext sagen, welche Eingabe wir erwarten.
In unserem Kontaktformular macht ein Hinweistext an keiner Stelle wirklich Sinn. Ich hab mir trotzdem etwas einfallen lassen, um das Beispiel zu verdeutlichen.
d) Gruppiere Eingaben, die logisch zusammengehören
Oft ist es sinnvoll Eingabefelder, die zusammengehören, zu gruppieren. Dadurch wird das Formular so wahrgenommen, als wären es einfach mehre kleine Abschnitte. Das macht das “Verdauen” der Inhalte leichter.
In unserem Fall ist das Formular sehr überschaubar und deswegen ist dieser Schritt nicht nötig. Bei komplexeren Formularen, die unter anderem die ganze Adresse abfragen, macht das mehr Sinn.
In unserem Formular habe ich zur Veranschaulichung Vor- und Nachname gruppiert. Wenn wir unsere Eingabefelder gruppieren, müssen wir das dem Nutzenden auch deutlich machen. Dafür gibt es die sogenannte “Legende”, die beschreibt, was gruppiert wurde.
e) Zeige dem User, wo er sich gerade befindet
Jetzt müssen wir Nutzenden noch klar zeigen, wo sie sich gerade im Formular befinden. Ein offensichtlicher “Fokus”-State macht erkenntlich, welches Formularfeld man gerade ausfüllt.
Wer schon mal ein Formular ohne Fokus-State ausgefüllt hat, der weiß, wie nervig es ist, wenn man mal kurz abgelegt wird und dann wieder finden muss, was man gerade ausgefüllt hat.
Für Menschen mit Sehbeeinträchtigungen ist das ganze noch viel schwieriger, weswegen klare und deutliche Fokus-States ein Muss sind.
f) Kläre auf, was mit den Daten passiert
Ein Punkt, der in den letzten Jahren immer wichtiger geworden ist: Der Aufbau von Vertrauen. Im Internet will einem jeder etwas verkaufen. Und unter diesen Verkäufern sind leider manchmal auch Gauner!
Deswegen wird es mehr und mehr zur Praxis, dass man den Nutzenden sagt, was mit ihren Daten passiert. Wofür werden die Daten verwendet? Warum muss ich meine Telefonnummer angeben? Wie lang speichert ihr die Daten? etc.
Eine kleine Beschreibung, was mit den Daten passiert beziehungsweise was generell passiert, nachdem man das Formular abschickt, kann Wunder bewirken. Neben bessere Verständlichkeit führt es unter Andrem auch dazu, dass die Anzahl an Formularabsendungen steigt.
g) Umgang mit Multistep-Formularen
Für die Übersichtlichkeit und Bedienbarkeit, ist es besser, wenn man lange Formulare in mehrerer kleineren Formulare teilt. Das trägt dazu bei, dass lange Formulare weniger abschrecken und gleichzeitig leichter zu verdauen sind.
Insbesondere für Personen, die nicht so Computern-affin sind oder kognitive Einschränkungen haben, ist das gefühlte “verkleinern” der Aufgabe sehr Hilfreich. Übrigens, auch einige der Menschen mit ADHS sind hier sehr dankbar, weil sie sich von großen Aufgaben schnell überfordert fühlen können.
Generell gilt für Multi-Step-Formulare: Wenn möglich, sollte der erste Schritt eines Formulars erklären, wie viele Schritte folgen. Jeder weitere Schritt sollte den Benutzer über den Fortschritt informieren, den er gerade macht.
Ansonsten gibt es drei Wege, wie man den Fortschritt in einem Formular anzeigen kann:
1 – Die Überschrift nutzen, um Fortschritt anzuzeigen
Die einfachste Möglichkeit ist es, den Fortschritt in der Überschrift mit aufzunehmen. Ganz simpel wird hier hinter der Überschrift zum Beispiel in Klammern ergänzt: (Schritt 1 von 4).
2 – Einen Fortschrittsbalken einsetzen
Eine etwas fortgeschrittenere Möglichkeit ist der Einsatz eines Fortschrittsbalkens. Der kann sehr nützlich sein, wenn es keine eindeutige Anzahl von Schritten gibt. Zum Beispiel, wenn Nutzenden bei der Eingabe auch Schritte überspringen können. So kann eine Umfrage zum Beispiel vier oder fünf Schritte haben, je nachdem, was Nutzende als Antworten geben.
Hier kann man offensichtlich nicht die Methode von oben verwenden, deswegen eignet sich ein Fortschrittsbalken eher.
3 – Die Schritt-für-Schritt-Indikator nutzen
Wenn ein Formular eine bekannte Anzahl von auszufüllenden Schritten hat, kann ein Schritt-für-Schritt-Indikator den Benutzern helfen, sich zu orientieren.
Dabei ist es nützlich, wenn der aktuelle und der abgeschlossene Schritt durch spezielle Formatierung von Text und mithilfe eines Icons hervorgehoben werden. Außerdem ist es gut, wenn die bereits abgeschlossenen Schritten einen Link haben, damit man zu den Schritten zurückkehren und sie noch mal überprüfen kann.
Workshop für Designer*innen
Du willst wissen, wie du als (UI / UX) Designer*in Webseiten und Apps barrierefrei gestaltest? In unserem Workshop zeigen wir dir alles, was du als Designer*in benötigst, um digitale Barrierefreiheit umzusetzen!
Schritt 2: Klares Feedback geben
Auch wenn wir unsere Bestes getan haben, unser barrierefreies Kontaktformular so verständlich wie möglich zu machen, wird es trotzdem oft passieren, dass Nutzende eine falsche Eingabe machen.
Deswegen ist es unsere nächste Aufgabe, dafür zu sorgen, dass wir diese Fehler so genau wie möglich zeigen und beschreiben. Wir wollen den Nutzenden dazu befähigen, die Probleme auch selbst beheben zu können, damit er das Formular doch abschicken kann!
a) Zeige die Fehler deutlich an
Was passiert, wenn Nutzende einen Fehler machen? Wir müssen es ihnen auf jeden Fall mitteilen!
Wie teilen wir ihnen das mit? Durch Fehlermeldungen!
Und wann erscheinen die Fehlermeldungen? Gute Frage!
Wann man Fehlermeldungen anzeigen soll, ist ein ungelöstes Rätsel und hängt zum Teil von der Komplexität des Formulars ab.
Oft wird ein Formular nach dem Ausfüllen, beim Klicken auf den Absende-Knopf validiert. Die WCAG hält das aufgrund von mehreren Dingen problematisch, zum Beispiel dann, wenn man mehrere Fehler beim Ausfüllen eines Formulars gemacht hat.
Warum? Je nachdem, wie viel Fehler man gemacht hat und je nachdem, wie die Fehlermeldungen angezeigt werden (geballt oben am Formular), kann diese Erfahrung sehr frustrierend sein. Das Absenden von Formularen wird genau aus dem Grund jeden Tag hundertfach abgebrochen.
Die bessere Art der Validierung (laut der WCAG) ist es, wenn das Feld direkt nach der Eingabe geprüft wird (auch “Inline Validation” genannt).
Das findet allerdings der schon oben genannte Adam Silver nicht so sinnvoll. Seine Meinung zu Validierung findet ihr hier: Link zum Blogeintrag von Adam Silver über Validierung (englisch).
Wann, welche Art der Validierung sinnvoll ist, müsst ihr euch bei eurem Formular also leider selbst überlegen.
Was man allerdings grundsätzlich sagen kann: Um Frustration zu vermeiden, hilft es, von Anfang an klare Anweisungen zu geben. Und zwar Anweisungen, was man beim Ausfüllen von jedem einzelnen Feld zu beachten hat und auch, was beim Ausfüllen des gesamten Formulars zu beachten ist (siehe Hinweistexte, weiter oben).
Wenn wir uns entschieden haben, wann wir einen Fehler anzeigen wollen, müssen wir uns Gedanken machen, wie wir einen Fehler anzeigen, um barrierefrei zu bleiben beziehungsweise zu sein.
Nutze Symbole oder Texte als Fehlermeldung, nicht nur Farben.
Was ist ein gängiges Problem mit typischen Fehleranzeigen? Das fehlerhafte Feld wird einfach nur in Rot markiert.
Was ist das Problem damit? Zehn Prozent der Männer haben eine Rot-Grün-Schwäche und werden den Fehler nie erkennen!
Um diese Fehleranzeige klar für alle zu machen, musst du also auf mehr als nur Farbe zurückgreifen. Du kannst zum Beispiel ein Icon nutzen, um den Fehler hervorzuheben oder mit Text beschreiben, was genau der Fehler ist.
Nutze Aria-Live-Regions für Screenreader.
Blinde Menschen mit Screenreader stehen vor folgender Herausforderung: Sie können nicht sehen, wenn sich etwas auf einer Webseite verändern. Ihnen muss expliziert vorgelesen werden, wenn sie einen Fehler gemacht haben. Das passiert durch die Nutzung von Aria-Live-Regionen, die aktiv einen Text vorlesen, sobald sich etwas verändert. Wie das genau funktioniert, erklären wir aber im nächsten Beitrag, wenn es um die Implementierung der Formulare geht!
b) Gebe Feedback nach dem Absenden
Feedback kann und sollte nicht nur negativ sein! Auch positives Feedback ist notwendig, um zu verstehen, was gerade passiert ist. Wir sollten Nutzende wissen lassen, wenn sie ein Formular richtig ausgefüllt haben, damit sie beruhigt sein können, dass alles geklappt hat.
Wie man dieses Feedback gibt, kann auf unterschiedliche Arten passieren. In unserm Fall lassen wir das Formular verschwinden und zeigen eine Erfolgsnachricht an.
Fazit barrierefreies Kontaktformular erstellen
Du solltest jetzt alle Grundlagen kennen, die du als Designer wissen musst, um ein Kontaktformular barrierefrei zu machen. In unserem nächsten Post werden wir darauf eingehen, worauf der Entwickler achten muss, um dieses Kontaktformular barrierefrei zu implementieren.
Natürlich gibt es noch viel mehr über Formulare zu lernen, besonders, wenn sie komplexere Input-Felder wie zum Beispiel ein Datums-Feld haben. Da raten wir dir, dich bei der WCAG schlau zu machen, bis wir es schaffen, dafür einen Blog zu schreiben!
Wenn du trotzdem Fragen zum Thema barrierefreie Formulare hast, melde dich jederzeit bei uns.
