71 lines
3.0 KiB
Plaintext
71 lines
3.0 KiB
Plaintext
|
The <code><label></code> tag defines a label for <code><input></code>, <code><select></code> and <code><textarea></code> elements.
|
|||
|
|
|
|||
|
|
The <code><label></code> 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 <code><label></code> element is clicked, the associated input field is toggled.
|
|||
|
|
|
|||
|
|
In most cases, <code>for</code> attribute of the <code><label></code> tag should be equal to the <code>id</code> 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 <code><input></code>, <code><select></code> or <code><textarea></code> tags should contain one of the following attributes: <code>aria-label</code>, <code>aria-labelledby</code>. Screen-readers will use those attributes to describe the field.
|
|||
|
|
|
|||
|
|
The purpose of this rule is to make sure that every <code>input</code> (except <code>submit</code>, <code>button</code>, <code>image</code>, and <code>hidden</code> inputs), <code>select</code>, and <code>textarea</code> 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. <code><label></code> tags enclosing an <code><input></code>, <code><select></code> or <code><textarea></code> instead of being referencing via an <code>id</code>. 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
|
|||
|
|
|