SiteLint documentation and guidelines

Empty label element

Description

An empty <label> element in HTML is a <label> that lacks any content or text between its opening and closing tags. Labels are essential for providing descriptive text for form controls, enabling users, especially those who rely on assistive technologies, to understand the purpose of each form element. An empty label can cause confusion, making it difficult for users to understand the context of the associated form control.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need descriptive labels to understand the purpose of form controls. Empty labels provide no context or information.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive labels that help them understand what information is required.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly labeled form controls to interact efficiently.

Why it matters

Labels are a crucial part of form accessibility, providing necessary context and instructions for form controls. Empty labels fail to provide this context, leading to a poor user experience and making forms difficult to use for individuals relying on assistive technologies. Properly implemented labels enhance the usability and accessibility of forms.

Coding problems and solutions

Common coding problems

  • Empty label tags: the <label> element is empty, containing no text or content.
  • Non-descriptive labels: labels that do not adequately describe the purpose of the form control.
  • Incorrect association: labels that are not properly associated with their corresponding form controls.

How to fix it

Provide descriptive label text

Ensure that every <label> element contains descriptive text that conveys the purpose of the form control.

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

Ensure labels are descriptive and informative

Use text in the label that clearly describes the form control’s function.

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

Properly associate labels with form controls

Use the for attribute to link the label to the corresponding form control’s id.

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

Known limitations

  • Complex forms: for complex forms with multiple input elements, ensure each input has a corresponding descriptive label.
  • Dynamic content: when dynamically adding form fields, ensure that labels are dynamically generated and associated correctly.
  • Testing across devices: test forms across different devices and screen readers to ensure that labels are properly associated and accessible.

Resources