Ensure every form element has a label

Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Lighthouse reports when form elements do not have associated labels:

How to fix this problem #

To fix this problem, provide a label for every form element. Screen reader users rely on these labels to navigate forms. Mouse or touchscreen users also benefit from labels, as the label text becomes a click target.

There are two ways to associate a label with a form element. Either place the input element inside a label element:

<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>

Or use the label's for attribute and refer to the element's id:

<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

When the checkbox has been labeled correctly, the screen reader reports that the element has a role of checkbox, is in a checked state, and is named "Receive promotional offers?" See also Label form elements.

• Form <input> elements must have labels
• Ensure every form element has a label audit source
• axe-core rule descriptions