Learn Measure Blog About

Form elements do not have associated labels

Appears in: Accessibility audits

Labels ensure that form controls are announced properly by assistive technologies like screen readers. Assistive technology users rely on these labels to navigate forms. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.

How this Lighthouse audit fails

Lighthouse flags form elements that don't have associated labels:

Lighthouse audit showing form elements do not have associated labels


How to add labels to form elements

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

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

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

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

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


Last updated: Improve article