如果<label>标签使用的时候没有与一个form control 绑定在一起的话,使用WAVE检查accessbility的时候这种情况会被标记出来。
需要给每一个label都绑定一个form control 来提高usability
The objective of this technique is to use the label
element to explicitly associate a form control with a label. A label
is attached to a specific form control through the use of the for
attribute. The value of the for
attribute must be the same as the value of the id
attribute of the form control.
The id
attribute may have the same value as the name
attribute, but both must be provided, and the id
must be unique in the Web page.
This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label
element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label
element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.
Note that the label
is positioned after input
elements of type="checkbox"
and type="radio"
.
Note 1: Elements that use explicitly associated labels are:
-
input type="text"
-
input type="checkbox"
-
input type="radio"
-
input type="file"
-
input type="password"
-
textarea
-
select
Note 2: The label
element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt
attribute (for image buttons), or element content itself (button).
-
Submit and Reset buttons (
input type="submit"
orinput type="reset"
) -
Image buttons (
input type="image"
) -
Hidden input fields (
input type="hidden"
) -
Script buttons (
button
elements or<input type="button">
)
Example 1: A text input field
The text field in the example below has the explicit label of "First name:". The label
element's for
attribute matches the id
attribute of the input
element.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Example 2: A checkbox
Example Code:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
Example 3: A group of radio buttons
A small, related group of radio buttons with a clear description and labels for each individual element.
Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.
Example Code:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>