There are Multiple Labels in Form Fields
When Lighthouse sees a form field with multiple labels, it flags it.
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