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:
<input type="checkbox">Receive promotional offers?</input>
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.
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. Java is a registered trademark of Oracle and/or its affiliates.