16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
110 lines
3.5 KiB
Plaintext
110 lines
3.5 KiB
Plaintext
== Why is this an issue?
|
||
|
||
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
|
||
|
||
[source,html]
|
||
----
|
||
<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
|
||
|
||
[source,html]
|
||
----
|
||
<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.
|
||
|
||
[source,html]
|
||
----
|
||
<label>
|
||
Name:
|
||
<input type="text" name="name">
|
||
</label>
|
||
----
|
||
|
||
|
||
== Resources
|
||
|
||
* 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[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
=== Message
|
||
|
||
Associate a valid label to this input field. | Add an "id" attribute to this input field and associate it with a label.
|
||
|
||
|
||
'''
|
||
== Comments And Links
|
||
(visible only on this page)
|
||
|
||
=== deprecates: S1078
|
||
|
||
=== on 25 Jun 2013, 09:20:17 Dinesh Bolkensteyn wrote:
|
||
'image' type should also be excluded? sounds like a submit alternative.
|
||
|
||
|
||
same for button.
|
||
|
||
=== on 8 Jul 2013, 18:19:43 Freddy Mallet wrote:
|
||
Is implemented by \http://jira.codehaus.org/browse/SONARPLUGINS-2997
|
||
|
||
endif::env-github,rspecator-view[]
|