rspec/rules/S1097/rule.adoc

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>
----


== See

* https://www.w3.org/TR/WCAG20-TECHS/H44.html[WCAG2, H97] - Using label elements to associate text labels with form controls
* https://www.w3.org/WAI/tutorials/forms/labels/[W3C Web Accessibility Tutorials] - Labeling Controls