Ensure every form element has a label

Ensure that all form elements, such as <input>, <textarea>, and <select>, have associated labels to convey their purpose to users, especially those relying on assistive technologies.

About This Rule

This rule ensures that form elements have associated labels, enhancing accessibility for users who rely on screen readers. Adhering to this guideline aligns with the following standards:

• WCAG 2.1 (A): 4.1.2 Name, Role, Value
• WCAG 2.0 (A): 4.1.2 Name, Role, Value
• WCAG 2.2 (A): 4.1.2 Name, Role, Value
• Section 508: 1194.22 (n)
• Trusted Tester: 5.C
• EN 301 549: 9.4.1.2 Name, Role, Value

Why It Matters

Labels provide essential context for form controls, enabling users to understand the expected input. Without proper labels, users who are blind, have low vision, or rely on screen readers may struggle to interact with forms effectively, leading to confusion and errors.

How to Fix

To ensure form elements are accessible:

• Explicit Labeling: Use the <label> element with a for attribute that matches the id of the form control:
  

  <label for="firstname">First name:</label>
  <input type="text" id="firstname">

• Implicit Labeling: Wrap the form control with the <label> element:
  

  <label>
    First name:
    <input type="text">
  </label>

• Using aria-label: For controls labeled visually by other means (e.g., an icon), provide an accessible name:
  

  <input type="text" aria-label="Search">

• Using aria-labelledby: Reference existing elements that serve as labels:
  

  <div id="firstname-label">First name:</div>
  <input type="text" aria-labelledby="firstname-label">

• Avoid Sole Reliance on placeholder: While the placeholder attribute can provide hints, it should not replace labels, as placeholder text disappears upon user input:
  

  <input type="text" placeholder="First name">

Examples

Incorrect

An input field without an associated label:

<input type="text">

Correct

An input field with an explicit label:

<label for="email">Email:</label>
<input type="email" id="email">

More Information

• W3C: Form Labels
• WebAIM: Form Controls and Labels