## Why is this an issue?

The `<label>` tag defines a label for `<input>`, `<select>` and `<textarea>` elements.

The `<label>` tag improves usability for visually impaired users: Screen readers will announce the label text whenever the focus is set on the input field.

It also improves usability for users with impaired motor control: when the text within the `<label>` element is clicked, the associated input field is toggled.

In most cases, `for` attribute of the `<label>` tag should be equal to the `id` attribute of the related element to bind them together.

Sometimes the field is explained by an icon. In this case the label can be either hidden or the `<input>`, `<select>` or `<textarea>` tags should contain one of the following attributes: `aria-label`, `aria-labelledby`. Screen-readers will use those attributes to describe the field.

The purpose of this rule is to make sure that every `input` (except `submit`, `button`, `image`, and `hidden` inputs), `select`, and `textarea` field has a label.

### Noncompliant code example

    <input type="text" name="firstname" />               <!-- Non-Compliant - no id -->

    <input type="text" name="lastname" id="lastname" />  <!-- Non-Compliant - no matching label for "lastname" -->

    <label for="address">Address</label>
    <input type="text" name="address" id="address" />    <!-- Compliant -->

    <input type="hidden" name="time" value="...">        <!-- Compliant - "hidden" type is excluded -->
    <input type="submit" value="Send" />                 <!-- Compliant - "submit" type is excluded -->

### Compliant solution

    <label for="firstname">First name</label>
    <input type="text" name="firstname" id="firstname" />

    <label for="lastname">Last name</label>
    <input type="text" name="lastname" id="lastname" />

    <!-- OR -->

    <input type="text" name="firstname" aria-label="firstname">

    <div id="lastNameId">Last name</div>
    <input type="text" name="lastname"  aria-labelledby="lastNameId"/>

    <!-- still compliant -->

    <label for="address">Address</label>
    <input type="text" name="address" id="address" />

    <input type="hidden" name="time" value="...">
    <input type="submit" value="Send" />

### Exceptions

No issue will be raised on "implicit labels", i.e. `<label>` tags enclosing an `<input>`, `<select>` or `<textarea>` instead of being referencing via an `id`. However, note that the support of this technic is not supported by all assistive technologies. Thus it is better to reference them by id.

    <label>
      Name:
      <input type="text" name="name">
    </label>

## Resources

- WCAG2, H97 - Using label elements to associate text labels with form controls
- W3C Web Accessibility Tutorials - Labeling Controls