Formularfelder richtig beschriften

WCAG 1.3.1, 3.3.2, 4.1.2, 2.5.3, 1.3.5 · leicht · etwa 45 Minuten · Stand 08.11.2026

Worum es geht

Im Checkout, bei der Newsletter-Anmeldung und im Kontaktformular müssen Menschen wissen, was in ein Feld gehört. Sehende erkennen das an der Beschriftung neben dem Feld. Ein Screenreader kann sie nur vorlesen, wenn sie im Code mit dem Feld verknüpft ist. Ein Platzhaltertext im Feld reicht nicht: Er verschwindet beim Tippen und wird nicht von allen Hilfsmitteln zuverlässig als Name erkannt. WCAG verlangt Beschriftungen oder Anweisungen (3.3.2) und dass Name und Rolle jedes Felds technisch ermittelbar sind (1.3.1, 4.1.2).

Wen es betrifft

Blinde Menschen mit Screenreader. Ohne verknüpftes Label hören sie nur "Eingabefeld, bearbeiten" und wissen nicht, was gefragt ist.
Menschen mit Sprachsteuerung, etwa Dragon oder Sprachsteuerung auf dem Mac. Sie sagen "Klicke E-Mail", und das funktioniert nur, wenn das Feld so heißt, wie es beschriftet ist (2.5.3).
Menschen mit motorischen Einschränkungen: Ein Klick auf ein verknüpftes Label setzt den Fokus ins Feld und vergrößert so die Klickfläche, bei Checkboxen besonders hilfreich.
Menschen mit kognitiven Einschränkungen oder Gedächtnisproblemen, für die ein verschwundener Platzhalter ein Rätsel wird.

So behebst du es

Jedes Feld bekommt ein <label>. Verknüpfe es über for und id.

Schlecht:

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

Gut:

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

Alternativ kannst du das Feld in das Label einschließen:

<label>
  <input type="checkbox" name="newsletter">
  Newsletter abonnieren
</label>

Pflichtfelder und Formate im Label oder in einem Hinweis nennen. Ein Sternchen allein ist nicht für alle verständlich. Hinweise verknüpfst du mit aria-describedby.

<label for="plz">Postleitzahl (Pflichtfeld)</label>
<input type="text" id="plz" name="plz" inputmode="numeric"
       autocomplete="postal-code" required aria-describedby="plz-hinweis">
<p id="plz-hinweis">Fünf Ziffern, zum Beispiel 10115.</p>

Zusammengehörige Felder gruppieren. Radiobuttons für Versandart oder Anrede gehören in ein <fieldset> mit <legend>. Der Screenreader liest dann die Frage zusammen mit jeder Option vor.

<fieldset>
  <legend>Versandart</legend>
  <input type="radio" id="standard" name="versand" value="standard">
  <label for="standard">Standardversand</label>
  <input type="radio" id="express" name="versand" value="express">
  <label for="express">Expressversand</label>
</fieldset>

Felder ohne sichtbares Label. Bei einem einzelnen Suchfeld mit Lupen-Button ist ein sichtbares Label die beste Lösung. Wenn das Design es nicht zulässt, gib dem Feld mit aria-label einen Namen und dem Button einen Text:
```
<form role="search">
  <input type="search" name="q" aria-label="Shop durchsuchen">
  <button type="submit">Suchen</button>
</form>
```

Buttons brauchen einen Namen. Ein Button, der nur ein Icon enthält, bekommt einen unsichtbaren Text oder aria-label.

<button type="button" aria-label="Menge erhöhen">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="..."/></svg>
</button>

Sichtbarer Text und technischer Name passen zusammen (2.5.3). Steht auf dem Button "Jetzt kaufen", sollte der technische Name diesen Text enthalten. Ein aria-label="Bestellung absenden" auf einem Button mit der Aufschrift "Jetzt kaufen" bricht die Sprachsteuerung.
Autocomplete setzen (1.3.5). Bei Feldern zu persönlichen Daten hilft das passende autocomplete-Attribut dem Browser beim Ausfüllen: name, given-name, family-name, email, tel, street-address, postal-code, address-level2 (Ort), country.
Nur ein Label pro Feld. Mehrere <label>-Elemente für dasselbe Feld werden unterschiedlich vorgelesen. Fasse sie zusammen oder nutze aria-describedby für Zusatztext.

So prüfst du es

Klicktest: Klicke auf jede Beschriftung. Springt der Cursor ins passende Feld oder wird die Checkbox umgeschaltet? Dann ist die Verknüpfung da.
Browser-Devtools: In Chrome, Edge und Firefox zeigt der Bereich "Accessibility" bzw. "Barrierefreiheit" den berechneten Namen ("Name") jedes Felds. Ist er leer, fehlt das Label.
Screenreader: Gehe mit NVDA oder VoiceOver per Tab durch das Formular. Bei jedem Feld sollte die Beschriftung, die Art des Felds und gegebenenfalls "erforderlich" angesagt werden.
axe DevTools meldet fehlende Labels (label, select-name), Buttons ohne Namen (button-name, input-button-name), doppelte Labels und ungültige autocomplete-Werte.
WAVE-Erweiterung zeigt "Missing form label" als Fehler und markiert verknüpfte Labels.