Definition: Eine Formularbeschriftung (Label) sagt, was in ein Eingabefeld gehört – etwa „E-Mail-Adresse“. Barrierefrei ist sie, wenn sie sichtbar ist und im Code mit dem Feld verknüpft, sodass Screenreader sie beim Feld vorlesen. Ein Platzhaltertext im Feld ersetzt sie nicht [1][2].
Englisch: Form label · Auch: Label · Zuletzt geprüft: 27. September 2026
Warum das wichtig ist
Formulare sind oft der Punkt, an dem Nutzende etwas erreichen wollen: bestellen, buchen, sich anmelden. Fehlt eine Beschriftung, hört ein blinder Mensch nur „Eingabefeld, leer“ und muss raten. Eine sichtbare Beschriftung hilft auch Menschen mit kognitiven Einschränkungen, Menschen mit Sehbehinderung, die stark vergrößern, und allen, die ein halb ausgefülltes Formular wieder aufnehmen.
Die Verknüpfung im Code hat einen zweiten Nutzen: Ein Klick auf das Label setzt den Fokus ins Feld. Bei kleinen Kontrollkästchen vergrößert das die Klickfläche deutlich.
Welche WCAG-Kriterien betroffen sind
- 1.3.1 Info und Beziehungen: Die Beziehung zwischen Beschriftung und Feld muss im Code stehen, nicht nur sichtbar nebeneinander.
- 3.3.2 Beschriftungen oder Anweisungen: Wo Eingaben nötig sind, gibt es Beschriftungen oder Hinweise – etwa zum Datumsformat.
- 4.1.2 Name, Rolle, Wert: Das Feld hat einen zugänglichen Namen.
- 2.5.3 Beschriftung im Namen: Der sichtbare Text steckt auch im zugänglichen Namen, damit Sprachsteuerung funktioniert.
Häufige Fehler
- Nur ein Platzhalter: Er verschwindet beim Tippen, hat oft zu wenig Kontrast und wird nicht von allen Screenreadern zuverlässig als Name angesagt.
- Label ohne Verknüpfung: Ein
<span>über dem Feld sieht aus wie eine Beschriftung, ist aber keine. - Gruppen ohne Überschrift: Radiobuttons „Ja“ und „Nein“ ohne
<fieldset>und<legend>– Ja wozu? - Pflichtfelder nur mit rotem Sternchen ohne Erklärung.
Im Code
<!-- Kein Label: nur ein Platzhalter -->
<input type="email" placeholder="E-Mail">
<!-- Sichtbar und verknüpft -->
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email"
autocomplete="email" required>
Für Gruppen gilt: <fieldset> um die Optionen, <legend> als gemeinsame Frage.
Wie Reviseberg damit umgeht
Reviseberg findet mit axe-core Felder ohne zugänglichen Namen (Regel label) und Auswahllisten ohne Beschriftung (select-name). Ob eine Beschriftung verständlich ist oder ein Hinweis zum Format fehlt, kann keine Regel entscheiden. Reviseberg führt 3.3.2 deshalb als nur teilweise automatisch prüfbar.
Verwandte Begriffe
Zugänglicher Name · Semantisches HTML · Screenreader · Sprachsteuerung · Live-Region