Warum Formulare oft eine digitale Sackgasse sind

Formulare sind der zentrale Punkt der Interaktion auf vielen Webseiten. Wenn sie nicht barrierefrei sind, können Nutzer keine Anfragen senden, sich nicht registrieren oder nichts kaufen. Das führt zu Frustration, hohen Abbruchraten und direktem Geschäftsverlust. Barrierefreie Formulare sind daher keine Kür, sondern eine wirtschaftliche Notwendigkeit, insbesondere für Onlineshops.

Die wichtigsten Merkmale barrierefreier Formulare

1. Eindeutige, sichtbare und verknüpfte Beschriftungen (Labels)

Jedes einzelne Eingabefeld (Textfeld, Checkbox, Radiobutton) benötigt eine eindeutige, immer sichtbare Beschriftung. Diese wird mit dem <label>-Tag realisiert, das über das for-Attribut mit der id des Feldes programmatisch verknüpft wird.

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">

Ein Screenreader kann diese Verknüpfung erkennen und liest dem Nutzer vor, welche Eingabe erwartet wird, wenn das Feld fokussiert wird. Ein Klick auf das Label setzt zudem den Fokus direkt in das zugehörige Feld, was auch Maus-Nutzern hilft.

2. Klare und hilfreiche Fehlermeldungen

Wenn ein Nutzer eine falsche Eingabe macht oder ein Pflichtfeld vergisst, muss der Fehler klar und verständlich kommuniziert werden. Eine gute Fehlermeldung:

• Erscheint in unmittelbarer Nähe zum fehlerhaften Feld.
• Beschreibt präzise, was falsch ist (z.B. "Bitte geben Sie eine gültige E-Mail-Adresse im Format name@beispiel.de ein").
• Ist programmatisch mit dem Feld verknüpft, z.B. über das Attribut aria-describedby. Dadurch wird die Fehlermeldung vom Screenreader vorgelesen, wenn der Nutzer das Feld erneut fokussiert. Mehr Informationen dazu finden Sie im Artikel über ARIA-Attribute.
• Kennzeichnet das Feld zusätzlich visuell (z.B. durch eine rote Umrandung UND ein Icon), nicht nur durch Farbe.

3. Tastaturbedienbarkeit und logische Reihenfolge

Alle Formularfelder und der Senden-Button müssen in einer logischen und nachvollziehbaren Reihenfolge per Tab-Taste erreichbar und bedienbar sein. Checkboxen werden mit der Leertaste aktiviert, bei Radio-Button-Gruppen navigiert man mit den Pfeiltasten.

4. Platzhalter (Placeholder) sind kein Ersatz für Labels!

Der Platzhaltertext (definiert über das placeholder-Attribut) verschwindet, sobald der Nutzer zu tippen beginnt. Er ist daher kein Ersatz für ein permanent sichtbares <label>. Außerdem ist sein Kontrast oft zu gering. Platzhalter können für optionale Hinweise oder Formatbeispiele (z.B. "max.mustermann@mail.de") verwendet werden, aber niemals als einzige Beschriftung.

5. Kennzeichnung von Pflichtfeldern

Pflichtfelder sollten klar und konsistent gekennzeichnet sein. Dies kann durch ein Sternchen (*) geschehen, dessen Bedeutung am Anfang des Formulars erklärt wird, oder durch den Zusatz "(erforderlich)" im Label. Zusätzlich kann das Attribut aria-required="true" für Screenreader-Nutzer gesetzt werden.