WCAG 2.1 - 3.3.2
Labels or Instructions
Labels oder Anweisungen werden bereitgestellt, wenn der Inhalt Benutzereingaben erfordert.
Inhalt
Was Bedeutet das Success Criterium 3.3.2 - Labels or Instructions?Warum ist es so wichtig, das Success Criterium 3.3.2 - Labels or Instructions zu beachten?Was hat das Success Criterium 3.3.2 - Labels or Instructions mit dem BFSG zu tun?Lösungen für 3.3.2 - Labels or Instructions anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 3.3.2 - Labels or Instructions?Was Bedeutet das Success Criterium 3.3.2 - Labels or Instructions?
Das WCAG-Erfolgskriterium 3.3.2 verlangt, dass alle Benutzereingaben, also z.B. Formularfelder und interaktive Elemente (wie Checkboxen, Dropdown-Menüs usw.), eine klare Beschriftung oder Anweisung erhalten. Das bedeutet, für jedes Eingabefeld muss deutlich gemacht werden, was der Nutzer eintragen soll. Dies kann beispielsweise mit einem beschreibenden Label-Element direkt vor dem Feld oder mit einer zusätzlichen Text-Anleitung erfolgen. Auch Hinweise zu erforderlichen Formaten (z.B. "Bitte geben Sie Ihr Geburtsdatum im Format TT.MM.JJJJ ein") fallen darunter.
Es reicht nicht, sich auf Platzhaltertexte ("placeholder") zu verlassen oder Beschriftungen nur visuell, aber nicht maschinenlesbar (für Screenreader) darzustellen.
Technische Anforderungen (vereinfacht)
- Jedes Formularfeld muss ein zugeordnetes, sichtbares und programmatisch erkennbares Label haben (z.B. mit dem <label>-Element verknüpft).
- Falls ergänzende Informationen nötig sind (z.B. Formatangaben), müssen diese für alle Nutzergruppen zugänglich und verständlich sein.
- Anweisungen (z.B. Pflichtfeld-Markierungen, Formatierungs-Hinweise) sollten klar UND maschinenlesbar sein.
Beispiele für Labels oder Anweisungen
- Ein Textfelder für E-Mail-Adressen mit dem beschrifteten Label "E-Mail-Adresse".
- Ein Hinweis unterhalb eines Passwort-Eingabefelds: "Mindestens 8 Zeichen, davon ein Sonderzeichen" (für alle zugänglich).
Warum ist es so wichtig, das Success Criterium 3.3.2 - Labels or Instructions zu beachten?
Viele Menschen – z.B. Menschen mit Sehbehinderungen oder kognitiven Einschränkungen – können ohne eindeutige und zugängliche Beschriftungen und Anweisungen keine Formulare korrekt ausfüllen. Auch Nutzer, die Screenreader einsetzen, benötigen programmatisch zugeordnete Labels, um zu verstehen, was in welches Feld einzugeben ist. Ohne dieses Kriterium sind Webformulare für viele gar nicht oder nur sehr schwer nutzbar, was zu Frustration oder Barrieren beim Zugriff auf Dienstleistungen und Informationen führt.
Was hat das Success Criterium 3.3.2 - Labels or Instructions mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) schreibt verbindlich vor, dass digitale Produkte (wie Websites) keine Barrieren für Menschen mit Behinderungen enthalten sollen. Da WCAG 2.1 Level AA die Grundlage für BFSG bildet, ist die Umsetzung von 3.3.2 Voraussetzung für die gesetzliche Konformität. Fehlende Labels/Anweisungen würden z.B. dazu führen, dass wichtige Dienste für Nutzer:innen nicht zugänglich sind – daher ist dieses Kriterium zwingend!
Lösungen für 3.3.2 - Labels or Instructions anhand von Codebeispielen
Falscher Code
<form>
<input type="text" name="email" placeholder="E-Mail-Adresse">
<button type="submit">Absenden</button>
</form>Korrekter Code
<form>
<label for="email">E-Mail-Adresse:</label>
<input type="text" id="email" name="email">
<button type="submit">Absenden</button>
</form>Im schlechten Code wird die Beschriftung nur als Platzhalter verwendet. Dieser ist oft schwach kontrastiert, verschwindet bei der Eingabe und ist für Screenreader schwer zu erkennen. Im guten Beispiel wird das <label>-Element genutzt, welches für alle Nutzergruppen zugänglich und maschinenlesbar ist.
Falscher Code
<form>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password">
<small>*</small>
<button type="submit">Anmelden</button>
</form>Korrekter Code
<form>
<label for="password">Passwort <span aria-label="Pflichtfeld">*</span> <span class="sr-only">Pflichtfeld</span>:</label>
<input type="password" id="password" name="password" aria-required="true">
<div id="pw-instructions">Mindestens 8 Zeichen, davon ein Sonderzeichen.</div>
<button type="submit">Anmelden</button>
</form>Das schlechte Beispiel markiert ein Pflichtfeld nur mit einem Sternchen, ohne weitere Erklärung (für Screenreader nicht erkennbar). Die gute Version erklärt dabei das Pflichtfeld textlich und nutzt ARIA-Attribute und einen lesbaren Hinweis für das Passwortformat. So profitieren auch Screenreader-Nutzer:innen und Menschen mit kognitiven Einschränkungen.
Wie löse ich Verstöße gegen das Success Criterium 3.3.2 - Labels or Instructions?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.