label · WCAG 4.1.2 Name, Role, Value · Stufe AWie Sie das „label“-Problem beheben
Die axe-core-Regel label schlägt fehl, wenn ein <input>, <select> oder <textarea> kein zugeordnetes Label hat. Screenreader-Nutzer erreichen dann ein Feld, das sie nicht identifizieren können. WCAG 2.2 (4.1.2 / 3.3.2, Stufe A) verlangt für jedes Bedienelement einen Namen.
Was axe-core prüft
axe-core meldet jedes Formularfeld ohne per for/id verknüpftes <label>, ohne umschließendes Label und ohne aria-label/aria-labelledby. Ein Platzhalter allein ist kein Label.
Welcher Norm das entspricht
| WCAG 2.2 | 4.1.2 Name, Role, Value (Stufe A) |
| EN 301 549 | 9.4.1.2 |
| BFSG / EAA | BFSG § 12 i. V. m. EN 301 549 · EAA Anhang I |
| Kategorie | Formulare & Labels |
Warum es zählt
Ein Checkout mit unbeschrifteten Feldern — E-Mail, Adresse, Karte — ist der folgenschwerste Barrierefreiheits-Fehler im Shop: Der Kauf lässt sich gar nicht abschließen. Stufe A und trivial vorführbar — genau das Ziel einer BFSG-Beanstandung.
Häufige Ursachen
- Felder, die nur
placeholderals Label nutzen - Eigene Felder, deren sichtbares Label ein bloßes
<div>ist - Suchfelder mit Icon-Button, aber ohne Feldlabel
- Vorhandene Labels, die nicht per
for/idverknüpft sind
Wie Sie es beheben
Verknüpfen Sie ein <label> über passende for- und id-Werte, oder umschließen Sie das Feld mit dem Label. aria-label nur, wenn ein sichtbares Label nicht möglich ist.
<!-- Fehler: Platzhalter ist kein Label -->
<input type="email" placeholder="E-Mail">
<!-- Besteht -->
<label for="email">E-Mail</label>
<input id="email" type="email">Verwandte Prüfungen
FAQ
Nein. Platzhalter verschwinden bei Eingabe und gelten nicht als zugänglicher Name. Nutzen Sie ein echtes Label.
Ja — im DOM belassen und mit einer visually-hidden-Klasse verbergen, oder aria-label nutzen. Kein display:none.
Finden Sie jeden solchen Fehler auf Ihrer Seite
Starten Sie einen kostenlosen WCAG 2.2 AA-Scan — echte axe-core-Engine, ohne Anmeldung. Oder ein zeitgestempelter Beweis-Report für 29 €.