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


ifdef::env-github,rspecator-view[]
'''
== Comments And Links
(visible only on this page)

include::comments-and-links.adoc[]
endif::env-github,rspecator-view[]
