Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: Formularfelder sollten nur ein label-Element besitzen (WCAG 3.3.2)

form-field-multiple-labels

Das bedeutet

Jedes Formularfeld darf nur ein Label-Element haben, das seine Funktion eindeutig beschreibt. Mehrere Labels für dasselbe Eingabefeld führen zu widersprüchlichen Informationen für Screenreader, da nicht klar ist, welche Beschriftung vorgelesen werden soll. Labels sollen den Zweck des Feldes erklären, zum Beispiel „E-Mail-Adresse“ oder „Passwort“.

Auswirkung

Wenn ein Formularfeld mehrere Labels besitzt, können Nutzer und Nutzerinnen mit Screenreader nicht erkennen, welche Information relevant ist. Die Beschriftung wird doppelt oder in falscher Reihenfolge ausgegeben. Das erschwert das Verständnis, führt zu fehlerhaften Eingaben und verletzt WCAG 3.3.2 (A) Beschriftungen (Labels) oder Anweisungen.

Empfehlung

  • Verwenden Sie pro Eingabefeld nur ein Label-Element.

  • Wenn Sie zusätzliche Hinweise benötigen (z. B. Pflichtfelder oder Formatangaben), setzen Sie diese außerhalb des Labels oder nutzen Sie aria-describedby.

  • Achten Sie darauf, dass das Label klar, kurz und verständlich formuliert ist.

  • Testen Sie Formulare mit Screenreader oder Tastaturnavigation, um sicherzustellen, dass die Zuordnung funktioniert.

 

Beispiele

Problematisch:

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

 

Besser:

<label for="email">E-Mail-Adresse <span aria-hidden="true">*</span></label>
<input id="email" type="email" name="email" aria-describedby="email-hint">
<span id="email-hint">Pflichtfeld</span>

 

Erklärung:
Im ersten Beispiel existieren zwei Label-Elemente für dasselbe Eingabefeld. Das ist für Screenreader nicht eindeutig.
Im zweiten Beispiel wird nur ein Label genutzt. Der Zusatz „Pflichtfeld“ ist über aria-describedby semantisch korrekt verknüpft.

 

Hinweis

Mehrere Labels für dasselbe Feld sind technisch erlaubt, werden aber von assistiven Technologien nicht zuverlässig unterstützt. Es sollte immer nur das erste Label genutzt werden, um die Barrierefreiheit sicherzustellen.

 

Verknüpftes WCAG-Kriterium:
WCAG 3.3.2 – Beschriftungen (Labels) oder Anweisungen
Zur offiziellen WCAG-Dokumentation →