W3C home Web Accessibility Initiative (WAI) home

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

[DRAFT] Labels

  • 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.

Note:

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.

Code snippet

<div>
<label for="firstname">First name: </label>
<input type="text" name="firname" id="firstname" />
</div>
<div>
<label for="lastname">Last name: *</label>
<input type="text" name="lastname" id="lastname" />
</div>

Full code example for associating <label> (new window)

Label position

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.