77 lines
2.9 KiB
Plaintext
77 lines
2.9 KiB
Plaintext
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
|
||
|