Skip to content
Learn Measure Blog Case studies About
On this page
  • How this Lighthouse audit fails
  • How to add labels to form elements
  • Resources

Form elements do not have associated labels

May 2, 2019 — Updated Mar 20, 2020
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Accessibility audits
On this page
  • How this Lighthouse audit fails
  • How to add labels to form elements
  • Resources

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
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

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:

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

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.

Resources #

  • Source code for Form elements do not have associated labels audit
  • Form <input> elements must have labels (Deque University)
Last updated: Mar 20, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.