Ensure form field does not have multiple label elements

Each form field should be associated with only one <label> element to ensure clarity and accessibility.

About This Rule

This rule ensures that form fields are not associated with multiple <label> elements, promoting clear and accessible form design. Adhering to this guideline helps prevent confusion for users, particularly those utilizing assistive technologies.

Why It Matters

Associating multiple labels with a single form field can cause confusion for users, especially those relying on assistive technologies. Screen readers may read all associated labels consecutively, leading to redundancy and potential misunderstanding. Ensuring a one-to-one relationship between form fields and labels enhances usability and accessibility.

How to Fix

Ensure that each form field has only one associated label:

• Use a single <label> element for each form control.
• Avoid assigning multiple <label> elements to the same form field.
• If additional descriptive text is necessary, consider using aria-describedby to reference supplementary information without assigning multiple labels.

Example

Incorrect

Multiple labels associated with a single input field:

<label for="username">User Name:</label>
<label for="username">Enter your user ID</label>
<input id="username" type="text" name="username">

Correct

A single label with additional descriptive text:

<label for="username">User Name:</label>
<input id="username" type="text" name="username" aria-describedby="usernameHelp">
<span id="usernameHelp">Enter your user ID</span>