3.3.2 Etiketten oder Anweisungen (Labels or Instructions)

WCAG - Definition

Wenn die Eingabe von Benutzern erforderlich ist, werden Labels oder Anweisungen bereitgestellt.

Das heißt: Jedes Formularfeld, jedes Bedienelement oder jede Interaktion, bei der Nutzer etwas eingeben oder auswählen müssen, muss klar gekennzeichnet oder beschrieben sein, damit keine Missverständnisse entstehen.

Bedeutung

  • Labels und Anweisungen helfen allen Nutzern, insbesondere aber Menschen mit kognitiven Einschränkungen, Screenreader-Nutzern oder Menschen mit geringer Technik-Erfahrung.

  • Ohne klare Beschriftung verstehen Nutzer nicht, was sie eingeben sollen → das führt zu Fehlern.

  • Labels sind nicht nur visuell, sondern müssen auch programmatisch verfügbar sein (Accessibility APIs).

Beispiele:

  • Ein Feld nur mit Platzhaltertext („Placeholder“) erfüllt die Anforderung nicht – weil Screenreader-Nutzer diesen Text oft nicht zuverlässig hören.

  • Besser: Ein sichtbares Label („E-Mail-Adresse“) und ein programmatisches Attribut (<label for="email">).

Ausreichende Techniken

HTML-Formulare korrekt beschriften

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

  • <label>-Element ist mit for an das Eingabefeld gebunden.

  • Screenreader liest: „E-Mail-Adresse, Eingabefeld“.

ARIA als Ergänzung (falls kein Label möglich ist)

<input type="text" aria-label="Telefonnummer">

Nur einsetzen, wenn kein sichtbares Label möglich ist. Sichtbare Labels sind immer besser.

Gruppen von Feldern mit <fieldset> und <legend>

<fieldset>
  <legend>Liefermethode</legend>
  <input type="radio" id="dhl" name="shipping" value="dhl">
  <label for="dhl">DHL</label>
  <input type="radio" id="ups" name="shipping" value="ups">
  <label for="ups">UPS</label>
</fieldset>

Screenreader erkennt: „Liefermethode, Gruppe mit 2 Optionen“.

Anweisungen geben

Beispiel: „Passwort muss mindestens 8 Zeichen lang sein“ → als Hinweis vor dem Feld oder mit aria-describedby.

<label for="password">Passwort</label>
<input type="password" id="password" aria-describedby="pwHelp">
<p id="pwHelp">Mindestens 8 Zeichen, 1 Zahl, 1 Sonderzeichen</p>

Beratungstechniken

  • Prüfen: Sind alle Pflichtfelder beschriftet?

  • Prüfen: Sind Instruktionen vor oder in direkter Nähe zum Feld sichtbar?

  • Prüfen: Werden nur Placeholders genutzt → das ist Fehlerquelle Nr. 1.

  • Prüfen: Ist das Label programmatisch verknüpft (for/id)?

  • Empfehlen: Design-Guidelines einführen, damit Labels nicht „weggespart“ werden.

Fehler

  • Nur placeholder als Label benutzen.
  • Label nicht mit Input verknüpfen.
  • Fehlende Instruktionen.
  • Nur visuelle Hinweise („* = Pflichtfeld“) ohne Screenreader-Kompatibilität.