SiteLint documentation and guidelines

Missing or incorrect association label with form control

Description

The accessibility issue of missing or incorrect association labels with form controls refers to the lack of proper labeling or incorrect labeling of form elements such as text inputs, checkboxes, radio buttons, and other interactive components. This problem occurs when there is no visible label associated with a form control, or when the existing label does not accurately describe the purpose of the input field.

Form labels play a crucial role in helping users understand what information they should enter into each field. Without proper labels, users may struggle to complete forms correctly, leading to frustration and potential errors.

Disabilities impacted

Visual impairments: users who rely on screen readers face significant challenges when form controls lack proper labels. Screen readers cannot infer the purpose of unlabeled fields, leaving users uncertain about what information they should enter. This makes it difficult for visually impaired users to navigate and complete forms independently.
Cognitive disabilities: individuals with cognitive disabilities may struggle to understand the purpose of form fields without clear labels. Proper labeling helps these users focus on the task at hand and reduces confusion when filling out complex forms.
Motor impairments: while motor impairments don’t directly relate to the issue of missing labels, proper labeling can indirectly benefit users with motor disabilities. Clear labels help reduce errors, which means fewer corrections need to be made using assistive technologies or manual input methods.

Why it matters

This accessibility issue matters for several reasons:

It ensures equal access to digital services for people with disabilities.
Proper labeling improves overall usability for all users, regardless of ability.
It helps maintain consistency in form design and user experience.
Correct implementation contributes to better search engine optimization (SEO).

Coding problems and solutions

Common coding problems

Missing <label> element:
Incorrect example
```
<input type="text" name="username">
```

Incorrect for attribute in <label>:

Incorrect example

<label for="incorrect-id">Username:</label>
<input type="text" id="correct-id" name="username">

Using placeholder text as a substitute for labels:
Incorrect example
```
<input type="text" name="email" placeholder="Enter email address">
```

Hidden labels that are not visible to screen readers:

Incorrect example

<label style="display: none;">Username:</label>
<input type="text" name="username">

How to fix it

To properly associate labels with form controls:

Use the <label> element and correctly link it to the form control:

Correct example

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

Wrap the form control within the <label> element (implicit label):
Correct example
```
<label>Username:<input type="text" name="username"></label>
```

For checkboxes and radio buttons, wrap the entire group in a <fieldset> with a <legend>:

Correct example

<fieldset>
  <legend>Select your favorite color:</legend>
  <div>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Red</label>
  </div>
  <div>
    <input type="radio" id="blue" name="color" value="blue">
    <label for="blue">Blue</label>
  </div>
</fieldset>

Ensure labels are visible and meaningful:
- Avoid using placeholder text as a substitute for labels.
- Make sure labels are concise yet descriptive.
- Use consistent labeling conventions throughout your application.

Known limitations

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

Complex forms may require additional guidance beyond basic labeling.
Dynamic forms that change based on user input may need special handling.
Multilingual sites may face challenges in translating labels accurately.
Automated translate pages features, e.g. built-in the browsers, do not translate label content.

Resources

Rule

ID: missing-label