SiteLint documentation and guidelines

Missing label

Description

Labels are essential for form accessibility, providing users with information about the purpose of each form control. The label element in HTML links descriptive text to a form control, such as an input, textarea, or select element, ensuring that users, particularly those relying on assistive technologies, understand what information is required in each field. Missing labels can lead to confusion and accessibility issues.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need labels to understand the function of each form field.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive labels that help them understand what is required in each form field.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on labels to efficiently interact with form controls.

Why it matters

Labels provide essential context for form controls, ensuring that all users can understand and interact with the form. Missing labels can lead to incomplete or incorrect form submissions, user frustration, and accessibility barriers. Proper labeling enhances the usability and accessibility of forms for all users.

Screen readers rely on labels to describe form controls for users with visual impairments. Without labels, screen readers cannot provide meaningful descriptions, making it difficult or impossible for visually impaired users to understand what information is required in each field.

Labels improve keyboard navigation. Clicking on a label focuses the associated form control, which is helpful for users who rely on keyboards for navigation. Without labels, navigating forms becomes more cumbersome.

Although the primary purpose of labels is usability and accessibility, well-labeled forms can indirectly benefit SEO. Improved usability leads to better engagement metrics, which search engines may consider when ranking websites.

Coding problems and solutions

Common coding problems

  • Missing labels: form controls lack associated label elements, making it difficult for users to understand their purpose.
  • Incorrect label association: labels are not properly associated with their respective form controls, leading to confusion.
  • Non-descriptive labels: labels are present but do not provide enough information about the form control’s purpose.
  • Click target size: without labels, users must click precisely on the small area of the checkbox or radio button to select them. With a label, clicking anywhere on the text selects the corresponding input, making forms easier to use, especially on touch devices.
  • Form completion time: users can complete forms faster when labels are present because they don’t have to carefully aim their clicks. This improves the overall user experience.

How to fix it

Include labels for all form controls

Ensure that every form control has an associated label element.

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

Properly associate labels with form controls

Use the for attribute on the label element to associate it with the corresponding form control’s id.

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

Use descriptive labels

Ensure that labels provide enough information about the purpose of the form control.

Incorrect example
<label for="password">Password:</label>
<input type="password" id="password" name="password">
Correct example
<label for="password">Password (8-16 characters):</label>
<input type="password" id="password" name="password">

Use ARIA labels for complex controls

For complex form controls, use ARIA attributes to provide additional context.

Incorrect example
<label for="search">Search:</label>
<input type="search" id="search" name="search">
Correct example
<label for="search">Search:</label>
<input type="search" id="search" name="search" aria-label="Search for articles">

Known limitations

  • Dynamic forms: when adding dynamic form fields, ensure that labels are dynamically generated and associated correctly.
  • Complex forms: for complex forms, ensure that all sections and fields are properly labeled and provide clear instructions. Use fieldset and legend HTML elements to group related form controls as a best practice for creating accessible and user-friendly forms.
  • Browser compatibility: test forms across different browsers and devices to ensure that labels are properly associated and accessible.

Resources