Eingabehilfen (WCAG 3.3.2): Labels und Anweisungen für Formularfelder

Ein Formularfeld ohne Label ist wie eine Tür ohne Schild: Man weiß nicht, was dahinter kommt. Screenreader-Nutzer hören nur „Eingabefeld, leer" – ohne Label fehlt jede Information, was einzutragen ist. Aber auch sehende Nutzer profitieren von klaren Anweisungen: Welches Datumsformat wird erwartet? Ist das Feld eine Pflichtangabe? WCAG 3.3.2 und das BFSG machen diese Hilfestellungen zur Pflicht.

Was fordert WCAG 3.3.2?

Wenn eine Webseite Nutzereingaben erfordert, müssen Labels oder Anweisungen bereitgestellt werden. Das umfasst: Sichtbare Labels: Jedes Formularfeld braucht eine sichtbare Beschriftung – nicht nur einen Placeholder. Formatvorgaben: Wenn ein bestimmtes Format erwartet wird (z. B. TT.MM.JJJJ für Datumsfelder), muss das Format sichtbar kommuniziert werden. Pflichtfeld-Markierung: Pflichtfelder müssen erkennbar sein – z. B. durch Stern (*) mit Legende am Formularanfang. Gruppierung: Zusammengehörige Felder (z. B. Anrede/Vorname/Nachname) sollten mit <fieldset> und <legend> gruppiert sein.

Technische Umsetzung

HTML-Label-Element: Die Standardlösung – ein <label for="feldid"> verknüpft Label und Feld programmatisch. Screenreader lesen das Label vor, wenn das Feld fokussiert wird. Klick auf das Label fokussiert das Feld. Placeholder ist kein Label: Ein Placeholder verschwindet bei Eingabe und hat zu wenig Kontrast. Er darf ergänzend genutzt werden (z. B. Beispielwert), aber nie als einziges Label. Anweisungen per aria-describedby: Zusätzliche Hinweise (z. B. „Mindestens 8 Zeichen, inkl. Großbuchstabe") werden per aria-describedby verknüpft und vom Screenreader nach dem Label vorgelesen. Pflichtfelder: Nutze aria-required="true" oder das HTML5-Attribut required, damit Screenreader „erforderlich" ansagen.

Häufige Fehler

Placeholder statt Label: Der häufigste Fehler – sieht modern aus, ist aber eine WCAG-Verletzung. Label fehlt programmatisch: Ein sichtbares Label existiert visuell, ist aber nicht per for-Attribut mit dem Feld verknüpft – Screenreader können es nicht zuordnen. Formatangabe fehlt: Ein Telefonnummer-Feld ohne Hinweis, ob +49, 0049 oder 0 erwartet wird. Gruppierung fehlt: Radio-Buttons ohne <fieldset>/<legend> – der Screenreader sagt nur „männlich, Radio-Button" statt „Geschlecht: männlich, Radio-Button". Verstecktes Label: Ein per display: none verstecktes Label wird auch von Screenreadern ignoriert. Nutze stattdessen sr-only-Klassen (visuell versteckt, programmatisch sichtbar).

WCAG-Bezug

WCAG 3.3.2 Labels or Instructions ist Level A und über die EN 301 549 (Abschnitt 11.3.3.2) BFSG-pflichtig. Es steht in engem Zusammenhang mit: WCAG 1.3.1 (Info and Relationships, Level A) – die programmatische Verknüpfung von Label und Feld. WCAG 4.1.2 (Name, Role, Value, Level A) – das programmatisch ermittelbare Label eines UI-Elements. WCAG 3.3.1 (Error Identification, Level A) – wenn trotz Label ein Fehler auftritt, muss er benannt werden. WCAG 2.4.6 (Headings and Labels, Level AA) – Labels sollen den Zweck des Felds beschreiben. In der Praxis: Wer 3.3.2 vernünftig umsetzt, erfüllt oft gleichzeitig 1.3.1 und 4.1.2 für Formularfelder.