Criteria 11.1 and 11.2 – Labels associated properly with their form fields

This post is also available in: Français (French)

Form <input> elements must have labels.

Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit label element and explicit label, aria-label, or aria-labelledby attribute values.

Form elements that should have labels

  • Text entry fields, e.g. <input type=”text”>, <input type=”password”> and <textarea>
  • Radio buttons, <input type=”radio”>
  • Checkboxes, <input type=”checkbox”>
  • Select menus, <select>

The only exceptions for this requirement are:

  • Buttons — buttons are self-labeling
  • Hidden inputs — Inputs with the type attribute value of hidden (e.g., type=”hidden”). These inputs are hidden and unavailable for user input. They therefore need no label.

This markup renders to produce a textbox with the words “First name:” next to it. Sighted users have no problem associating the text with the input field. Nevertheless, this connection is not as clear for non-sighted users, especially as forms grow longer and more complex. This ambiguity can make errors more likely, especially when the information required is more complex than a first name.

To fix the problem, you should create an association between the label text (i.e., “First name:” and the input field. Best practice is to add an explicit, rather than implicit association. All modern browsers and major assistive technologies support explicit labeling for all form elements. Explicit labels also have the added benefit of making the clickable area on a form element larger, making it easier for all users, though particularly those with motor disabilities, to click on relatively small form elements.

Methods for adding labels

  • Create a label element wrapped around the input field. This creates an implicit, rather than explicit, association between the label and the input field.
  • Associate the label element with the input field using the for attribute whose value is the ID attribute of the input. This creates an explicit, rather than implicit, association between the label and the input field.
  • Use an aria-label attribute value.
  • Use aria-labelledby attribute value.

Finally, ensure that each input element has only one label. Note that if any of your input elements have help text, be sure this text differs from the label element text.

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />

<label for="pays">Votre pays</label>
<select id="pays" name="pays">
<option value="belgique">Belgique</option>
<option value="france">France</option>
[…]
</select>