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