Gültige Label-IDs für Fragmente

Silktide prüft Formular-Labels, die per ID auf ein anderes Element verweisen, und meldet Labels, deren ID nirgends auf der Seite existiert. Ein Label, das auf nichts zeigt, kann nichts benennen.

In HTML benennt ein <label> ein Formularfeld, indem sein Attribut for auf die id des Feldes gesetzt wird. Diese Prüfung stellt nur sicher, dass die referenzierte ID irgendwo auf der Seite existiert – eine begleitende Prüfung, Gültige Label-IDs, geht weiter und prüft, ob das Ziel ein Formularfeld ist, das ein Label annehmen kann.

<!-- Problem: Nichts auf der Seite hat die id="food" -->
<label for="food">Lieblingsessen</label>

Warum das wichtig ist

Ein Label mit einer defekten Referenz bewirkt nichts: Ein Screenreader kann es keinem Feld zuordnen, sodass das Feld, für das das Label gedacht war, ohne Namen angekündigt wird, und ein Klick auf das Label fokussiert es nicht mehr. Da die Seite unverändert aussieht, treten diese Fehler oft unbemerkt auf, wenn IDs umbenannt oder das Markup umstrukturiert wird; nur eine automatisierte Prüfung erkennt sie.

So beheben Sie das Problem

1. Suchen Sie das Element, das das Label beschreiben sollte, und setzen Sie den for-Wert des Labels exakt auf die id dieses Elements (IDs unterscheiden Groß- und Kleinschreibung):

<!-- Behoben: Das Label verweist auf eine reale ID -->
<label for="food">Lieblingsessen</label>
<input type="text" id="food">

2. Falls dem Zielelement seine id fehlt, fügen Sie eine hinzu.
3. Wenn das Label veraltet ist und nichts mehr beschreibt, entfernen Sie es.

So prüft Silktide das

1. Auf jeder Seite alle <label>-Elemente mit einem nicht-leeren for-Attribut finden.
2. Nach einem Element irgendwo auf der Seite suchen, dessen id übereinstimmt.
3. Das Label melden, wenn kein solches Element existiert.

Weitere Informationen

• Understanding Success Criterion 1.3.1: Information und Beziehungen (WCAG 2.2)
• Das label-Element (MDN)
• Gültige Label-IDs