There are Multiple Labels in Form Fields

When Lighthouse sees a form field with multiple labels, it flags it.

There are Multiple Labels in Form Fields

How to pass the audit? – Removing Duplicate Form Labels 

  • If you wish, you can choose the <label> element to be the parent of the form element.
<label>Label for checkbox
  <input type="checkbox" id="checkbox1" />
</label>
  • Also, you can use an attribute to make a direct association with the form element of the label element. for an attribute will be appropriate for this.
<label for="checkbox1">Label for checkbox</label>
<input type="checkbox" id="checkbox1" />
  • You can also use the aria-labelledby attribute if you wish. In this way, you will be connecting the form and a different separate element. You will need to use the ID of this element for this.
<p id="checkbox1_label">Label for checkbox</p>
<input type="checkbox" id="checkbox1" aria-labelledby="checkbox1_label" />

Test Your Website Issues

You can quickly analyze your site