HTML Guides for labelable

A label element with a for attribute contains a form control whose id is missing or doesn't match the for value.

A label can be tied to its control in two ways: by wrapping the control, or by naming the control's id in for. When for is present, it alone picks the labeled control, and the label may not contain any other labelable element. The labelable elements are button, input (except type="hidden"), meter, output, progress, select and textarea, and the message names the one that broke the rule.

The browser follows for and ignores the nested control. If for points at an id that doesn't exist, the label has no control at all: clicking its text does nothing, and the control inside can end up without an accessible name.

A button usually gets here through a search form that wraps both the search field and its submit button in one <label for="search-field">. The field's id matches, but the button can't share it because every id in a page must be unique. The validator also reports that the label holds more than one labelable descendant, and screen readers may read the button's text as part of the field's name.

Close the label before the button, or move the button out of it, so the label holds only the control it names. When the label wraps a single control, either give that control an id equal to the for value, or remove for and let the wrapping make the association.

Invalid example

<form role="search" action="/search">

<label for="search-field">

Search for:

<input type="search" id="search-field" name="q">

<button type="submit">Search</button>

</label>

</form>

Valid example

<form role="search" action="/search">

<label for="search-field">

Search for:

<input type="search" id="search-field" name="q">

</label>

<button type="submit">Search</button>

</form>