SiteLint documentation and guidelines

A single label element should only describe one form control.

Description

The for attribute in HTML is used to associate a <label> element with a form control, such as an <input>, <textarea>, or <select> element. When the same for attribute value is duplicated for multiple labels, it can create confusion and accessibility issues, as assistive technologies may not correctly identify the relationship between the labels and form controls. Each for attribute value should be unique within a form to ensure proper association.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need unique for attribute values to understand the association between labels and form controls.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and unique associations between labels and form controls, helping them understand what information is required.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly associated labels and form controls to interact efficiently.

Why it matters

Ensuring that each for attribute value is unique within a form enhances the accessibility and usability of the form. Proper association between labels and form controls is essential for providing context and instructions to all users, particularly those using assistive technologies. Duplicating for attribute values can lead to confusion and make it difficult for users to complete forms accurately.

Coding problems and solutions

Common coding problems

  • Duplicated for attribute values: multiple labels using the same for attribute value, leading to incorrect associations.
  • Incorrect form control ids: form controls with the same id attribute value, causing conflicts with for attributes.
  • Missing unique identifiers: form controls missing unique id attributes, making it impossible to create unique for associations.

How to fix it

Ensure unique for attribute values

Assign unique id values to each form control and use these values in the for attribute of the corresponding labels.

Incorrect example
<label for="user">Username:</label>
<input type="text" id="user" name="username">

<label for="user">Email:</label>
<input type="email" id="user" name="email">
Correct example
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Use descriptive and unique ids

Ensure that id values are descriptive and unique within the form to avoid conflicts.

Incorrect example
<label for="input">Phone Number:</label>
<input type="tel" id="input" name="phone">

<label for="input">Address:</label>
<input type="text" id="input" name="address">
Correct example
<label for="phone-number">Phone Number:</label>
<input type="tel" id="phone-number" name="phone">

<label for="address">Address:</label>
<input type="text" id="address" name="address">

Check for duplicates

Regularly review and test forms to ensure that for attributes and id values are unique and correctly associated.

Incorrect example
<label for="personal-info">Date of Birth:</label>
<input type="date" id="personal-info" name="dob">

<label for="personal-info">Social Security Number:</label>
<input type="text" id="personal-info" name="ssn">
Correct example
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

<label for="ssn">Social Security Number:</label>
<input type="text" id="ssn" name="ssn">

Known limitations

  • Dynamic forms: when dynamically generating form fields, ensure that unique id and for attribute values are generated to maintain accessibility.
  • Complex forms: for complex forms with many input elements, careful planning and testing are required to ensure unique identifiers.
  • Testing across devices: test forms across different devices and assistive technologies to ensure that labels and form controls are correctly associated.

Resources

Rule

  • Rule ID: duplicated-for-attribute.
  • Standard: Accessibility, WCAG, 1.3.1.