Form Labels

All form elements must have an associated label, WCAG 4.1.2 (opens in a new tab).

Use the browser developer tools to inspect these inputs, and they should enable you to see that only the right hand side input has an accessible name associated with it.

Additionally, clicking on the second label focuses the input, as the label is properly associated. When the first label is clicked, nothing happens.

Ways to fix

Some simple ways to associate labels to their inputs include making the input a child of the label, or using the built in for attribute.

Child of the label

By making the input a child of the label, the input will be implicitly associated with the label.

<label>
  Test input
  <input type="text" name="name" />
</label>

Using the for attribute

If the label and input aren't implicitly associable, perhaps for design reasons, or other technical reasons, the for attribute can equally be used to associate them.

  <label for="name-input">Test input</label>
  <input id="name-input" type="text" name="name" />

References

• WCAG.4.1.2 Name, Role, Value (opens in a new tab)
• MDN Docs on labels, with examples (opens in a new tab)