label-for-valid

A label’s for attribute should name a control it can label

manualconfidence: mediumseverity: minorunderstandable

Flags a label whose for attribute names no element, or an element that cannot be labelled, so the label labels nothing, for manual review.

Applies to. <label> elements the page shows with a non-empty for attribute.

Expectation. HTML: a label with for labels the element with that id in its tree, if that element is labelable, and nothing otherwise, whatever the label contains.

for names a labelable element (button, input other than hidden, meter, output, progress, select, textarea) or a custom element, which may be form-associated: pass.
for names no element: cantTell (LABEL_FOR_TARGET_MISSING).
for names an element that can't be labelled: cantTell (LABEL_FOR_NOT_LABELABLE).

Either way the label labels nothing. Check which control it was meant for: that control may be named another way, which the name rules judge, or be left without the visible label meant for it.

What a finding reports.

for: the id the label names.
targetElement: for LABEL_FOR_NOT_LABELABLE, the tag of the element named.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

pass

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

for names the input, so the label labels it.

can't tell

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

for names no element, so the label labels nothing. A person checks which control it was meant for.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

`LABEL_FOR_NOT_LABELABLE`

Find the label the report names and the element its for attribute points to (the report gives its tag).
Work out which form control the label was meant for.
Read that control's computed name in the Accessibility pane, and click the label to see whether it focuses the control.

Pass. The label is fixed to point at the control it describes, or that control already has the same name another way and the label is only visible text.

Fail. The label points at an element that cannot be labelled, so the control it was meant for gets no name or focus from it, a best-practice miss under HTML's labelled-control rules.

`LABEL_FOR_TARGET_MISSING`

Find the label the report names and the id in its for attribute.
Search the page's elements for that id; check whether the control appears later, for example after a script runs.
Work out which control the label was meant for, read its computed name in the Accessibility pane, and click the label to see whether it focuses that control.

Pass. The id exists once the page is ready and the label names and focuses its control.

Fail. No element has that id, so the label labels nothing and its control is left without that name, a best-practice miss under HTML's labelled-control rules.

View source