Barrierefreie Formulare: Labels, Fehler, Hilfe

An Formularen scheitern die meisten Bestellungen und Anfragen. Mit klaren Labels, verständlichen Fehlern und etwas Hilfe werden barrierefreie Formulare für alle leichter.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Barrierefreie Formulare: vorher und nachher

Vorher: Platzhalter statt Label, Fehler nur rot Nachher: Sichtbare Labels, Fehler als Text mit Lösung

Links verschwindet die Beschriftung beim Tippen. Rechts bleibt sie stehen, und der Fehler wird erklärt. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum barrierefreie Formulare über Anfragen entscheiden

Ein Formular ist oft der wichtigste Moment auf einer Website, denn hier wird aus einem Besucher ein Kunde. Gleichzeitig sind Formulare besonders fehleranfällig. Laut der Auswertung WebAIM Million 2025 fehlten auf fast der Hälfte der meistbesuchten Startseiten Beschriftungen an Eingabefeldern, und wer ein Feld nicht versteht, füllt es nicht aus.

Ein typischer Fehler ist der Platzhalter als einzige Beschriftung. Er sieht aufgeräumt aus, verschwindet aber, sobald man tippt, ist meist zu hell und wird von manchen Screenreadern nicht zuverlässig vorgelesen. Wer abgelenkt wird oder nachprüfen will, ob er das richtige Feld erwischt hat, steht dann vor einem leeren Kasten.

Mindestens genauso wichtig sind Fehlermeldungen. Ein rot umrandetes Feld ohne Erklärung bemerken viele nicht, und wer Rot und Grün schlecht unterscheidet, sieht es gar nicht. Gute Fehlermeldungen stehen als Text direkt am Feld, sagen genau, was fehlt, und schlagen eine Lösung vor. WCAG 2.2 verlangt zudem, dass Menschen dieselben Angaben nicht ständig neu eingeben müssen.

WCAG 2.2

Was die WCAG hier verlangen

1.3.1 Stufe A

Info und Beziehungen

Beschriftungen sind im Code mit ihrem Feld verbunden, Gruppen wie Anrede oder Zahlungsart sind als Gruppe ausgezeichnet.
3.3.1 Stufe A

Fehlererkennung

Ein Fehler wird erkannt und als Text beschrieben, nicht nur über Farbe.
3.3.2 Stufe A

Beschriftungen oder Anweisungen

Jedes Feld hat eine sichtbare Beschriftung, Pflichtfelder und Formate sind vorher erklärt.
3.3.3 Stufe AA

Fehlerkorrektur

Wenn bekannt ist, wie es richtig geht, schlägt die Meldung eine Korrektur vor.
3.3.7 Stufe A

Redundante Eingabe

Neu in WCAG 2.2: Bereits gemachte Angaben werden übernommen oder zur Auswahl angeboten.
3.3.8 Stufe AA

Zugängliche Anmeldung

Neu in WCAG 2.2: Keine Rätsel zur Anmeldung, Einfügen von Passwörtern und Passwortmanager sind erlaubt.

Lösung

Was barrierefreie Formulare richtig machen

Sichtbare Labels über dem Feld

Jedes Feld bekommt eine Beschriftung, die über dem Feld steht und beim Tippen nicht verschwindet. Im Code ist das Label über das Attribut for mit dem Feld verbunden.
Fehler als Text am Feld

Zeige Fehler direkt unter dem Feld als Text mit einem Symbol, verbunden über aria-describedby. Fasse bei langen Formularen alle Fehler zusätzlich oben zusammen.
Autovervollständigung erlauben

Mit dem Attribut autocomplete füllen Browser und Passwortmanager Name, Adresse und E-Mail automatisch aus. Das spart Zeit und verhindert Tippfehler.
Kein Rätsel zur Kontrolle

Bilder-Captchas sind für blinde Menschen und viele andere eine Sackgasse. Unsichtbare Sperren gegen Spam, etwa Fallenfelder und eine Mindestzeit, schützen genauso gut.

Vorher

<input type="email"
  placeholder="E-Mail">

Nachher

<label for="mail">
  E-Mail-Adresse
</label>
<input id="mail" type="email"
  autocomplete="email"
  aria-describedby="mail-fehler">
<p id="mail-fehler">
  Bitte gib die vollständige
  Adresse ein.
</p>

Ein Platzhalter ist keine Beschriftung. Ein verbundenes Label, Autovervollständigung und eine verknüpfte Fehlermeldung machen das Feld für alle verständlich.

Fragen

Fragen zu Barrierefreie Formulare

Reicht ein Platzhalter als Beschriftung?

Nein. Der Platzhalter verschwindet beim Tippen und ist meist zu hell. Jedes Feld braucht eine sichtbare Beschriftung, der Platzhalter darf höchstens ein Beispiel zeigen.

Wie markiere ich Pflichtfelder?

Erkläre am Anfang des Formulars, wie Pflichtfelder gekennzeichnet sind, etwa mit einem Stern, und setze im Code zusätzlich das Attribut required.

Sind Captchas erlaubt?

Bilderrätsel sind für viele Menschen nicht lösbar. WCAG 2.2 verlangt für Anmeldungen einen Weg ohne kognitive Tests. Unsichtbare Spamsperren sind die bessere Lösung.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest