SiteLint documentation and guidelines

Label inappropriate association

Description

The inappropriate association of labels occurs when a form label is not correctly associated with its corresponding input field. Proper association between labels and input fields is crucial for accessibility, ensuring that screen readers and other assistive technologies can correctly convey the purpose of each input to users.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to understand the purpose of form controls. Incorrect label association can lead to confusion and incorrect form submissions.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and correctly associated labels that help them understand what information is required.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices need correctly associated labels to efficiently interact with form controls.

Why it matters

Properly 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 associations can lead to frustration, errors, and a poor user experience.

Coding problems and solutions

Common coding problems

  • Missing for attribute: labels are missing the for attribute, preventing the proper association with input fields. The exception is for implicit labels:
    Example of implicit label
    <label>Do you like cookies?
  <input type="checkbox" name="cookies" />
</label>
  • Incorrect for attribute value: the for attribute value does not match the id of the corresponding input field.
  • Labels not wrapped around inputs: labels are not properly wrapped around input fields when using implicit labeling.

How to fix it

Include the for attribute on labels

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

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

Ensure the for attribute matches the input id

Verify that the for attribute value exactly matches the id of the input field.

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

Use implicit labeling correctly

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

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

Known limitations

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

Resources