label-for-valid

Das for-Attribut eines Labels sollte ein Steuerelement nennen, das es beschriften kann

manualKonfidenz: mediumSchweregrad: minorunderstandable

Markiert ein Label, dessen for-Attribut kein Element nennt oder ein Element, das sich nicht beschriften lässt, sodass das Label nichts beschriftet, zur manuellen Prüfung.

Anwendbarkeit. <label>-Elemente, die die Seite mit einem nicht leeren for-Attribut anzeigt.

Erwartung. HTML: Ein Label mit for beschriftet das Element mit dieser id in seinem Baum, sofern dieses Element beschriftbar ist, und sonst nichts, unabhängig davon, was das Label enthält.

for nennt ein beschriftbares Element (button, input außer hidden, meter, output, progress, select, textarea) oder ein Custom Element, das formularzugehörig (form-associated) sein kann: pass.
for nennt kein Element: cantTell (LABEL_FOR_TARGET_MISSING).
for nennt ein Element, das sich nicht beschriften lässt: cantTell (LABEL_FOR_NOT_LABELABLE).

In beiden Fällen beschriftet das Label nichts. Prüfen Sie, für welches Steuerelement es gedacht war: Dieses Steuerelement kann auf andere Weise benannt sein, was die Namensregeln beurteilen, oder ohne das sichtbare Label bleiben, das für es gedacht war.

Was ein Befund meldet.

for: die id, die das Label nennt.
targetElement: bei LABEL_FOR_NOT_LABELABLE das Tag des genannten Elements.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass

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

for nennt das Input, also beschriftet das Label es.

can't tell

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

for nennt kein Element, also beschriftet das Label nichts. Eine Person prüft, für welches Steuerelement es gedacht war.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

`LABEL_FOR_NOT_LABELABLE`

Suchen Sie das im Bericht genannte label und das Element, auf das sein for-Attribut verweist (der Bericht nennt sein Tag).
Ermitteln Sie, für welches Formularelement das label gedacht war.
Lesen Sie den berechneten Namen dieses Bedienelements im Bereich „Barrierefreiheit“ und klicken Sie auf das label, um zu sehen, ob es das Bedienelement fokussiert.

Bestanden. Das label wird so korrigiert, dass es auf das Bedienelement verweist, das es beschreibt, oder dieses Bedienelement hat auf anderem Weg bereits denselben Namen und das label ist nur sichtbarer Text.

Nicht bestanden. Das label verweist auf ein Element, das nicht beschriftet werden kann, sodass das gemeinte Bedienelement dadurch weder Namen noch Fokus erhält; ein Verstoß gegen die Best Practice der HTML-Regeln für beschriftbare Bedienelemente.

`LABEL_FOR_TARGET_MISSING`

Suchen Sie das im Bericht genannte label und die id in seinem for-Attribut.
Durchsuchen Sie die Elemente der Seite nach dieser id; prüfen Sie, ob das Bedienelement später erscheint, zum Beispiel nachdem ein Skript gelaufen ist.
Ermitteln Sie, für welches Bedienelement das label gedacht war, lesen Sie seinen berechneten Namen im Bereich „Barrierefreiheit“ und klicken Sie auf das label, um zu sehen, ob es dieses Bedienelement fokussiert.

Bestanden. Die id existiert, sobald die Seite bereit ist, und das label benennt und fokussiert sein Bedienelement.

Nicht bestanden. Kein Element hat diese id, sodass das label nichts beschriftet und sein Bedienelement ohne diesen Namen bleibt; ein Verstoß gegen die Best Practice der HTML-Regeln für beschriftbare Bedienelemente.

Quellcode ansehen