What to do: Form elements need clear, descriptive, well-positioned labels.
Ideally labels should be explicitly associated with the form control.
- Why: An explicit label becomes a clickable area that can be used to put focus into the field either by mouse or by voice input software, it also ensures that screen readers announce the correct text when a field has focus.
- How: To associate a label and its form control, the <label> element must have a for attribute which exactly matches the value of an id attribute in its related field.
- Conformance: Providing descriptive, well positioned associated labels is required to meet SC 1.3.1 Info and Relationships, SC 2.4.6 Headings and Labels, SC 3.3.2 Labels and Instructions or SC 4.1.2 Name, Role, Value.
Explicitly associated label example
All fields marked * must be completed.
it's essential that required field indicators, and any other important information is kept within the label element, screen readers will not read out any text that is outside explicitly associated labels, if a different color is wanted for the indicator, this can be positioned within a span element inside the label element.
<label for="firstname">First name: </label>
<input type="text" name="firname" id="firstname" />
<label for="lastname">Last name: *</label>
<input type="text" name="lastname" id="lastname" />
To maximize predictability, (e.g. for people using high screen magnification), radio button and checkbox labels must be to the right of the field, labels for all other fields must be positioned to the left of the field.