Glossar · Technik & Code

Formularbeschriftung

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

Weiterführend

Häufige Fragen

Reicht ein Platzhalter als Beschriftung?

Nein. Er verschwindet beim Tippen und ist oft kontrastarm. Nutzen Sie ein sichtbares <label>; ein Platzhalter darf zusätzlich ein Beispiel zeigen.

Darf ein Label unsichtbar sein?

Nur in Ausnahmen, etwa bei einem Suchfeld mit eindeutiger Lupen-Schaltfläche. Dann braucht das Feld trotzdem einen zugänglichen Namen, etwa über ein visuell verstecktes Label.

Was ist besser: aria-label oder <label>?

<label>. Es ist sichtbar, vergrößert die Klickfläche und funktioniert ohne ARIA. aria-label ist eine Notlösung für Fälle ohne sichtbaren Text.

Quellen

  1. W3C, WCAG 2.2, Erfolgskriterium 3.3.2 Labels or Instructions – https://www.w3.org/TR/WCAG22/#labels-or-instructions
  2. W3C WAI, Forms Tutorial: Labeling Controls – https://www.w3.org/WAI/tutorials/forms/labels/
  3. W3C, WCAG 2.2, Erfolgskriterium 1.3.1 Info and Relationships – https://www.w3.org/TR/WCAG22/#info-and-relationships
  4. MDN, <label> – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Sehen Sie, was ein Scan auf Ihrer Website findet

Eine Seite in rund 30 Sekunden, ohne E-Mail. Der vollständige Bericht umfasst bis zu 100 Seiten und einen Tastatur-Durchlauf.