HTML controls that use external labels
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 (Non-Text Content), 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2 (Labels or Instructions), 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".
Elements that use explicitly associated labels are:
input type="date"input type="datetime-local"input type="email"input type="month"input type="number"input type="password"input type="search"input type="tel"input type="text"input type="time"input type="url"input type="week"input type="checkbox"
input type="color"
input type="file"
input type="radio"
input type="range"
select
textarea
The label element is not used for the following elements:
button (the label is provided by the content)input type="button" (the label is provided by the content)input type="hidden"input type="image" (the label is provided by the alt attribute)input type="reset" (the label is label provided by the value attribute)input type="submit" (the label is label provided by the value attribute)The text field in this example has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.
<label for="firstname">First name:</label>
<input id="firstname" name="firstname" type="text"><input checked id="markuplang" name="computerskills" type="checkbox">
<label for="markuplang">HTML</label>A small, related group of radio buttons with a clear description and labels for each individual element.
<h1>Doughnut Selection</h1>
<form action="/buy-doughnuts" method="post">
<fieldset>
<legend>Pick the doughnut you would like</legend>
<input id="dn-choc" name="flavor" type="radio" value="chocolate">
<label for="dn-choc">Chocolate</label>
<input id="dn-cream" name="flavor" type="radio" value="cream">
<label for="dn-cream">Cream Filled</label>
<input id="dn-raspberry" name="flavor" type="radio" value="raspberry">
<label for="dn-raspberry">Raspberry Filled</label>
</fieldset>
<input type="submit" value="Purchase Your Doughnut">
</form>For all input elements of type text, file or password, for all textarea elements, and for all select elements in the Web page:
label element that identifies the purpose of the control before the input, textarea, or select elementfor attribute of the label element matches the id of the input, textarea, or select element.label element is visible.For all input elements of type checkbox or radio in the Web page:
label element that identifies the purpose of the control after the input element.for attribute of the label element matches the id of the input element.label element is visible.