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 samefor
attribute value, leading to incorrect associations. - Incorrect form control
id
s: form controls with the sameid
attribute value, causing conflicts withfor
attributes. - Missing unique identifiers: form controls missing unique
id
attributes, making it impossible to create uniquefor
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.
<label for="user">Username:</label>
<input type="text" id="user" name="username">
<label for="user">Email:</label>
<input type="email" id="user" name="email">
<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 id
s
Ensure that id
values are descriptive and unique within the form to avoid conflicts.
<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">
<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.
<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">
<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
andfor
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
- MDN Web Docs – label element
- MDN Web Docs – id attribute
- W3C Web Content Accessibility Guidelines (WCAG) 2.1 – Labels or Instructions
Rule
- Rule ID:
duplicated-for-attribute
. - Standard: Accessibility, WCAG, 1.3.1.