Blog

Mit einfachen Mitteln zu barrierefreien Formularfeldern

von Dennis Westphal

Hintergrund

Im Oktober 2021 haben wir Food-Lieferdienste auf ihre Zugänglichkeit für blinde Menschen gecheckt. Bei dreien der fünf getesteten Anbieter konnte ich als Nichtsehender die ausgewählte Pizza gar nicht erst bestellen und hätte, wenn ich auf solchen Bringservice angewiesen wäre, den Abend hungrig auf dem Sofa verbringen müssen!

Neben dem Frust darüber, dass die Mehrzahl der Dienste nicht barrierefrei war, lässt sich die Erkenntnis daraus ziehen, dass wir dringend mal über Formulare sprechen müssen. Daran scheiterte es nämlich.

Reine Formsache, so ein Formular?

Schauen wir uns an, was so die gängigsten Fallstricke in Formularen sind.

Zunächst: Was muss da überhaupt rein?

Es gibt leider immer noch viele Formulare, bei denen nicht klar wird, was in die jeweiligen Felder geschrieben werden soll. Das einzige, was der Screenreader hier meldet, ist: "Eingabefeld, leer". Ob Name oder Vorname oder doch die Telefonnummer eingetragen werden sollen, kann man da nur raten!

Das liegt daran, dass Labels fehlen. Durch ein Label weiß ich als blinder Nutzender, welche Information von mir in diesem Formularfeld erwartet wird. Ein Formularfeld mit Label könnte beispielsweise so in HTML aussehen:

<label>Telefonnummer: <input type="text"></label>

Auch wenn es für Sehende die gleiche Ausgabe zu sein scheint, ist das etwas ganz anderes als beispielsweise:

<p>Telefonnummer: <input type="text"><p>

Also noch mal von vorn:

Super, jetzt ist schon mal klar, was in welches Feld gehört. "Telefonnummer, Eingabefeld, leer" klingt doch gleich besser. Aber muss ich die Telefonnummer wirklich angeben? Eigentlich würde ich die gerne weglassen ...

Und da sind wir auch schon beim nächsten Problem: der Auszeichnung von Pflichtfeldern. Aber auch das lässt sich in HTML ganz einfach umsetzen:

<label>Telefonnummer: <input type="text" required aria-required="true"></label>

Mist, vertippt!

Unter der Überschrift "Formulare, dritter Versuch - Pflichtfelder sind geklärt." sind drei Formularfelder mit den Labels Name*, Vorname und Telefonnummer* und ein Senden-Button zu sehen.
Lizensiert gemäß Alle Rechte vorbehalten

Illustration der Screenreader-Ausgabe bei Formularfeldern mit Pflichtfeldern.

Das sieht doch schon viel besser aus. Mit "Telefonnummer Stern, Eingabefeld erforderlich, leer" kann man etwas anfangen. Das Einzige, was uns jetzt noch von einer Pizza abhalten kann, ist ein fehlendes Feedback bei einer ungültigen Eingabe. Das passiert ja schnell: Man vertippt sich bei der Mail-Adresse, die PLZ hat einen Zahlendreher oder in die Telefonnummer gerät aus Versehen ein Buchstabe ...

Formulare fangen diese Unstimmigkeiten auf und geben entsprechende Fehlermeldungen zurück. Damit diese auch für blinde Nutzende zugänglich sind, verwendet man in HTML ein weiteres Attribut:

<label>Telefonnummer: <input type="text" required aria-required="true" aria-invalid="true"></label>

Houston, wir kennen das Problem!

Unter der Überschrift "Formulare, vierter Versuch - Fehlermeldungen werden ausgegeben." sind drei Formularfelder, gelabelt mit Name*, Vorname und Telefonnummer*, wobei bei Telefonnummer die Fehlermeldung "Error, Bitte nur Zahlen eingeben!" und die Eingabe "012345t6" zu sehen sind, sowie ein Senden-Button.
Lizensiert gemäß Alle Rechte vorbehalten

Illustration der Screenreader-Ausgabe bei Formularfeldern mit Fehlermeldung.

Mit den entsprechend vermerkten Informationen zu Falscheingaben führt das dann auch für Screenreader-Nutzende zur Ausgabe "Error, Telefonnummer, Eingabefeld, bitte nur Zahlen verwenden, 012345t6". Deutlich besser als einfach nur ein "Senden"-Button, der scheinbar nichts tut.

Fazit

Wenn ihr also erreichen möchtet, dass blinde Menschen eure Seite problemlos nutzen können, und ihr valide Eingaben von ihnen bekommen wollt, gibt dieser Artikel hoffentlich einen guten Einstieg. Dabei zeigt sich mal wieder: Es sind eigentlich nur Kleinigkeiten, die aber für die Benutzbarkeit einer Seite mittels Screenreader den großen Unterschied machen.

Fokus
Barrierefreiheit