Require input elements to have a label (input-missing-label)

All input elements must have an associated label.

It is required for accessibility tools to identify the purpose of the field.

For browsers it helps the user when clicking on the label to focus the field, especially important for checkboxes and radiobuttons where many users expect to be able to click in the label.

The label may either be explicitly associated using the for attribute or by nesting the <input> element inside the <label>. For regular input fields the former is recommended and for checkboxes and radiobuttons the latter is recommended.

Rule details

Examples of incorrect code for this rule:

<!-- no label element at all -->
<div>
    <strong>My field</strong>
    <input type="text">
    <textarea></textarea>
    <select>
        <option>Option</option>
    </select>
</div>

<!-- unassociated label -->
<div>
    <label>My field</label>
    <input type="text">
</div>
error: <input> element does not have a <label> (input-missing-label) at inline:4:6:
  2 | <div>
  3 |     <strong>My field</strong>
> 4 |     <input type="text">
    |      ^^^^^
  5 |     <textarea></textarea>
  6 |     <select>
  7 |         <option>Option</option>


error: <textarea> element does not have a <label> (input-missing-label) at inline:5:6:
  3 |     <strong>My field</strong>
  4 |     <input type="text">
> 5 |     <textarea></textarea>
    |      ^^^^^^^^
  6 |     <select>
  7 |         <option>Option</option>
  8 |     </select>


error: <select> element does not have a <label> (input-missing-label) at inline:6:6:
  4 |     <input type="text">
  5 |     <textarea></textarea>
> 6 |     <select>
    |      ^^^^^^
  7 |         <option>Option</option>
  8 |     </select>
  9 | </div>


error: <input> element does not have a <label> (input-missing-label) at inline:14:6:
  12 | <div>
  13 |     <label>My field</label>
> 14 |     <input type="text">
     |      ^^^^^
  15 | </div>


4 errors found.

Examples of correct code for this rule:

<!-- label with descendant -->
<div>
    <label>My field <input type="text"></label>
</div>

<!-- associated label -->
<div>
    <label for="my-field">My field</label>
    <input id="my-field" type="text">
</div>

Hidden labels

This rule requires labels to be accessible, i.e. the label must not be hidden or aria-hidden. If multiple labels are associated at least one of them must be accessible.

<label for="my-input" aria-hidden="true">My field</label>
<input id="my-input" type="text">
error: <input> element has label but <label> element is hidden (input-missing-label) at inline:2:2:
  1 | <label for="my-input" aria-hidden="true">My field</label>
> 2 | <input id="my-input" type="text">
    |  ^^^^^


1 error found.