SiteLint documentation and guidelines

Label implicitly associated

Description

Implicitly associated labels occur when the <label> element is wrapped around its corresponding input field, rather than using the for attribute to explicitly associate the label with the input. This method of labeling ensures that the label and input field are associated correctly without the need for matching id and for attributes. However, while this method can be effective, it must be implemented correctly to maintain accessibility and usability.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need properly associated labels to understand the purpose of form controls.
  • 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 properly associated labels to interact efficiently with form controls.

Why it matters

Properly associating labels with input fields ensures that assistive technologies can correctly interpret and announce the purpose of each form control. This enhances the accessibility and usability of forms, making it easier for all users to interact with the form elements.

Coding problems and solutions

Common coding problems

  • Improper wrapping of labels: labels are not correctly wrapped around the input fields, leading to incorrect associations.
  • Mixed use of implicit and explicit labels: mixing implicit and explicit label associations inconsistently across a form.
  • Labels not clearly associated: using implicit labels in a way that does not clearly convey the association to users or assistive technologies.

How to fix it

Properly wrap labels around input fields

Ensure that the <label> element correctly wraps around its corresponding input field.

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

Consistent labeling method

Use a consistent method for associating labels with input fields throughout the form.

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

Ensure clear association

Use clear and descriptive text within the labels to ensure users understand the purpose of each input field.

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

Known limitations

  • Complex forms: for complex forms with many fields, implicit labeling can become difficult to manage. Consider using explicit labels in such cases.
  • Dynamic content: when adding dynamic form fields, ensure that labels are dynamically associated correctly.
  • Consistency across devices: test forms on different devices and screen readers to ensure that implicit labels are interpreted correctly.

Resources