Gültige Label-IDs

Silktide prüft Formular-Labels, die ihr Feld über eine ID benennen, und verifiziert, dass diese ID auf der Seite existiert und zu einem Element gehört, das tatsächlich ein Label annehmen kann. Ein Label, das auf nichts oder auf den falschen Elementtyp zeigt, lässt ein Feld unbemerkt unbenannt.

In wird ein <label> mit seinem Formularfeld verbunden, indem das for-Attribut des Labels auf die id des Felds gesetzt wird. Die Verbindung bricht, wenn die ID vertippt ist, wenn sich die ID des Felds ändert, oder wenn das Ziel gar kein Formularfeld ist.

<!-- Problem: Es existiert kein Element mit id="fullname" -->
<label for="fullname">Vollständiger Name</label>
<input type="text" id="full-name">

Warum das wichtig ist

Über das Label kündigt ein ein Feld an. Ist die for-Referenz defekt, sind Label und Feld zwei voneinander unabhängige Elemente: Die Person hört ein unbenanntes „Textfeld bearbeiten“ und muss raten, was hineingehört. Visuell ändert sich nichts – das Label steht weiterhin neben seinem Feld –, daher bleiben solche Fehler oft unbemerkt, bis jemand, der auf die Verbindung angewiesen ist, das Formular nutzt.

So beheben Sie es

Suchen Sie das Feld, für das das Label gedacht ist, und gleichen Sie den for-Wert des Labels exakt mit der id des Felds ab (IDs unterscheiden Groß- und Kleinschreibung):

<!-- Behoben: Die Referenz entspricht der id des Felds -->
<label for="full-name">Vollständiger Name</label>
<input type="text" id="full-name">

Wenn das Label auf etwas zeigt, das kein Label annehmen kann – etwa ein <div> als benutzerdefiniertes Steuerelement –, verwenden Sie stattdessen : Geben Sie dem Element aria-labelledby, das auf den Text verweist, der es benennt.
Ist das Label ein Überbleibsel ohne zugehöriges Feld, entfernen Sie es.

Wie Silktide dies testet

Suchen Sie auf jeder Seite alle <label>-Elemente mit einem for-Attribut.
Suchen Sie das Element, dessen id dem for-Wert entspricht.
Melden Sie das Label, wenn ein solches Element nicht existiert.
Existiert es, melden Sie das Label, wenn das Ziel nicht zu den beschriftbaren Formularelementen gehört – Button, Input (außer hidden), Auswahlliste (select), Textbereich (textarea), meter, output oder Fortschrittsbalken (progress).

Fehlerbehebung

Das Feld wird per Skript hinzugefügt

Silktide untersucht jede Seite im gerenderten Zustand. Wenn das Zielfeld nur in bestimmten Zuständen der Seite existiert – z. B. nach dem Öffnen eines Panels –, kann das Ziel beim Test fehlen. Erwägen Sie, Label und Feld gemeinsam zu rendern.