WCAG 3.3.2 Beschriftungen (Labels) oder Anweisungen

Das Erfolgskriterium 3.3.2 sorgt dafür, dass alle wissen, was sie in ein Formular eingeben sollen. Menschen mit kognitiven Beeinträchtigungen, ältere Nutzer, Screenreader-Nutzer und alle, die einen Checkout auf einem kleinen Smartphone ausfüllen, profitieren von klaren Labels, sichtbaren Pflichtfeld-Markierungen und kurzen Formathinweisen. Es gehört zur Konformitätsstufe A und steht in EN 301 549 als Abschnitt 9.3.3.2. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Beschriftungen oder Anweisungen müssen bereitgestellt werden, wenn Inhalte Eingaben des Nutzers erfordern. Das W3C weist darauf hin, dass „erfordern“ bedeutet, dass Eingaben angenommen oder erwartet werden — optionale Felder zählen also auch.

• Ein Label ist Text (oder eine Komponente mit Textalternative), der allen Nutzern angezeigt wird, um ein Bedienelement zu kennzeichnen. Es muss kein HTML-Element <label> sein, aber für alle sichtbar — anders als ein zugänglicher Name, der verborgen sein darf.
• Anweisungen erklären erwartete Daten oder Formate, zum Beispiel „Geburtsdatum (TT.MM.JJJJ)“, welche Felder Pflicht sind oder worum es bei einer Gruppe von Radiobuttons geht.

Ziel sind hilfreiche Hinweise ohne Überfrachtung: Nicht jedes Feld braucht einen Absatz, aber niemand sollte raten müssen.

Typische Fehler in Onlineshops

• Checkout-Felder nur mit Platzhaltertext, der verschwindet, sobald der Nutzer zu tippen beginnt;
• ein Telefon- oder Kartenfeld, das auf mehrere Kästchen aufgeteilt ist, ohne Label für jeden Teil;
• Pflichtfelder, die nur mit einem roten Sternchen markiert sind, ohne Erklärung, was das Sternchen bedeutet;
• Radiobuttons für Versandoptionen oder Checkboxen für Einwilligungen ohne Gruppenbeschriftung;
• ein Mengenfeld, Suchfeld oder Newsletter-Feld mit Icon, aber ohne sichtbaren Text;
• ein ungewöhnliches Format (USt-IdNr., Passwortregeln) ohne Hinweis, bevor der Nutzer einen Fehler macht.

So prüfen Sie es

Automatisch: Unser Checker führt form-field-multiple-labels aus, das Felder mit mehr als einem Label markiert. Die verwandten Regeln für fehlende zugängliche Namen (etwa label, select-name) sind unter 4.1.2 aufgeführt. Ob ein Label sichtbar und verständlich ist, muss ein Mensch beurteilen.

Manuell: Gehen Sie jedes Formular durch. Prüfen Sie für jedes Feld, ob es sichtbaren Text gibt, der beim Tippen auf dem Bildschirm bleibt, ob Pflichtfelder als Text gekennzeichnet sind, ob Gruppen von Optionen eine Überschrift oder Legende haben und ob besondere Formate vor der Eingabe erklärt werden.

So beheben Sie es

• Geben Sie jedem Feld ein sichtbares <label for="…">; verwenden Sie Platzhalter nur für Beispiele.
• Gruppieren Sie Radiobuttons und Checkboxen in einem <fieldset> mit <legend>.
• Kennzeichnen Sie Pflichtfelder im Label („E-Mail (Pflichtfeld)“) oder erklären Sie das Sternchen oben im Formular.
• Ergänzen Sie einen kurzen Formathinweis und verbinden Sie ihn mit aria-describedby.

Verwandte Kriterien

• 3.3.1 Fehlererkennung — was passiert, wenn eine Eingabe falsch ist.
• 4.1.2 Name, Rolle, Wert — der programmatische Name jedes Felds.
• 1.3.5 Bestimmung des Eingabezwecks — Autovervollständigung für Felder mit persönlichen Daten.

Häufige Fragen

Reicht Platzhaltertext als Label?

Das ist riskant. Der Platzhalter verschwindet, sobald der Nutzer tippt, hat oft wenig Kontrast und wird von assistiven Technologien nicht immer vorgelesen. Ein sichtbares Label, das auf dem Bildschirm bleibt, ist die zuverlässige Lösung.

Gilt 3.3.2 nur für Pflichtfelder?

Nein. Das W3C erklärt, dass „erfordert“ hier bedeutet, dass Eingaben angenommen oder erwartet werden — auch optionale Felder brauchen also Labels oder Anweisungen.

Muss ich Pflichtfelder kennzeichnen?

Das ist der erwartete Weg, 3.3.2 zu erfüllen, wenn manche Felder Pflicht sind: Das W3C nennt die Kennzeichnung von Pflichtfeldern im Label oder in der Legende als hinreichende Technik. Verwenden Sie Text oder ein erklärtes Symbol, nicht nur Farbe.

Was ist der Unterschied zwischen 3.3.2 und 4.1.2?

3.3.2 betrifft Labels und Anweisungen, die alle Nutzer sehen können. 4.1.2 betrifft den zugänglichen Namen, den Software ausliest. Ein Feld kann einen verborgenen Namen haben und trotzdem kein sichtbares Label.