SiteLint documentation and guidelines

Same label element associated with more than only one form control

Description

This accessibility issue occurs when a single <label> element is associated with multiple form controls. In HTML, each form control (such as an input field, checkbox, or radio button) should have its own unique label that clearly describes its purpose.

When a label is shared among multiple form controls, it can lead to confusion for users who rely on assistive technologies like screen readers. These users may struggle to understand which specific control the label refers to, especially in complex forms with many fields.

Disabilities impacted

  • Visual impairments: users with visual impairments often rely on screen readers to navigate web pages. When a label is associated with multiple controls, the screen reader may announce the label multiple times without clear indication of which control it belongs to. This can make it difficult for visually impaired users to accurately fill out forms. For example: 
    <label>Choose your favorite color</label>
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

    In this case, a screen reader might announce Choose your favorite color twice without clearly indicating which radio button corresponds to which color option.

  • Cognitive disabilities: individuals with cognitive disabilities may find it challenging to process information when labels are ambiguous. Shared labels can increase cognitive load and make decision-making more difficult, especially in complex forms where users need to carefully consider each option.

    Shared labels can also lead to errors, as users might accidentally select the wrong option due to unclear associations between labels and controls.

  • Motor impairments: while motor impairments are less directly affected by this issue, users with conditions such as Parkinson’s disease or arthritis may still face challenges. They might need to rely more heavily on keyboard navigation or assistive technologies, which could be hindered by poorly structured form elements.

Why it matters

Proper labeling of form controls is crucial for creating accessible and user-friendly interfaces. By ensuring each control has its own unique label, we:

  • Improve the overall usability of forms.
  • Enhance the experience for users relying on assistive technologies.
  • Reduce errors and frustration during form completion.
  • Comply with web accessibility standards and guidelines.

Coding problems and solutions

Common coding problems

  • Using a single label for multiple related form controls.

How to fix it

To fix this issue, ensure that each form control has its own unique label. Here are some best practices:

  • Use the <label> HTML element for each form control.
  • Associate labels with controls using the for attribute on the label and matching id on the control.
  • Be specific and clear in your label text.
  • For groups of related inputs (like radio buttons), use a <fieldset> with a <legend> to group them logically.
Correct example
<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </div>
</form>

Known limitations

While proper labeling significantly improves accessibility, there are some limitations to consider:

  • Complex forms: in highly complex forms with many fields, even well-structured labels might not completely solve navigation issues for screen reader users.
  • Dynamic content: forms with dynamically loaded fields or conditional logic may require additional JavaScript to ensure proper labeling.
  • Multilingual sites: translating labels correctly while maintaining accessibility can be challenging, especially for languages with different grammatical structures.

Resources