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