org.sonar.l10n.web.rules.Web.InputWithoutLabelCheck.html Maven / Gradle / Ivy
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
<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>
Resources
- WCAG2, H97 - Using label elements to associate text labels with form controls
- W3C Web Accessibility Tutorials - Labeling Controls