SiteLint documentation and guidelines

Incorrect label placement for associated input

Description

Incorrect label placement for associated input fields occurs when the <label> element is not properly positioned relative to its corresponding input field. Proper placement and association of labels with input fields are crucial for accessibility, ensuring that screen readers and other assistive technologies can correctly interpret and announce the relationship between the label and the input field.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need labels to be correctly associated with their corresponding input fields to understand the purpose of each form control.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and correctly positioned labels that help 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 to interact efficiently with form controls.

Why it matters

Correctly positioning and associating labels with input fields enhances the accessibility and usability of forms. It ensures that all users, particularly those using assistive technologies, can understand and interact with the form as intended. Incorrect label placement can lead to confusion, errors, and a poor user experience.

Coding problems and solutions

Common coding problems

  • Labels not adjacent to inputs: labels are placed far from their corresponding input fields, causing confusion.
  • Labels without for attribute: labels are missing the for attribute, preventing proper association with input fields.
  • Input fields wrapped improperly: input fields are not correctly wrapped or associated with their labels, leading to incorrect associations.

How to fix it

Place labels adjacent to input fields

Ensure labels are placed directly before or after their corresponding input fields for clear association.

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

Use the for attribute to associate labels

Ensure every label has a for attribute that matches the id of the corresponding input field.

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

Properly wrap input fields for implicit labeling

If using implicit labeling, ensure the label correctly wraps the input field.

Correct example
<label>
    Password:
    <input type="password" name="password">
</label>
Incorrect example
<label>
    Password:
</label>
<input type="password" name="password">

Known limitations

  • Complex forms: for complex forms, ensure that all labels are correctly associated with their respective input fields to maintain clarity.
  • Dynamic content: when adding dynamic form fields, ensure that labels are dynamically associated correctly.
  • Testing across devices: test forms on different devices and screen readers to ensure proper label placement and association.

Resources