← Alle Regeln

Formulare

Formularfelder brauchen eine Beschriftung

• Regel: label
• Schweregrad: Kritisch
• WCAG-Stufe A

Warum das wichtig ist

Ein unbeschriftetes Eingabefeld wird als „Eingabe, leer“ angesagt. Man hört, dass es ein Feld gibt, aber nicht, was hineingehört — und die Fehlermeldung beim Absenden erklärt es auch nicht.

So beheben Sie es

1. Ergänzen Sie ein <label for="…">, dessen Wert der id des Feldes entspricht.
2. Lässt das Design keinen Platz, nutzen Sie aria-label mit demselben Wortlaut wie der Platzhalter.
3. Ein Platzhalter ist keine Beschriftung: Er verschwindet beim ersten Tastendruck und scheitert oft am Kontrast.

Im Markup

<input type="email" id="email">

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

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:

• 4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu label (ö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.