← Alle Regeln

Formulare

Ein Feld, eine Beschriftung

• Regel: form-field-multiple-labels
• Schweregrad: Mittel
• WCAG-Stufe A

Warum das wichtig ist

Zeigen mehrere <label>-Elemente auf dasselbe Feld, sind sich Browser und Screenreader uneins, welches gilt — die einen lesen das erste, die anderen das letzte, wieder andere alle zusammen.

So beheben Sie es

1. Führen Sie den Wortlaut in einem einzigen <label> zusammen.
2. Verlagern Sie Hinweise und Fehlertexte in ein eigenes Element, referenziert per aria-describedby.
3. Die Pflichtfeld-Kennzeichnung gehört in dasselbe Label, nicht in ein zweites.

Im Markup

<label for="email">Email</label>
<label for="email">Required</label>
<input id="email">

<label for="email">Email (required)</label>
<input id="email" required>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

• 3.3.2 Beschriftungen oder Anweisungen (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu form-field-multiple-labels (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.