---
title: Ensure every form element has a label | Accessibility Rule
description: Form elements must have labels
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/label
  md: https://testingbot.com/support/accessibility/web/rules/label/index.md
---
# Ensure every form element has a label

Rule ID: labelUser Impact: criticalGuidelines: WCAG 2.0

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](https://www.w3.org/WAI/tutorials/forms/labels/)
- [WebAIM: Form Controls and Labels](https://webaim.org/techniques/forms/controls#label)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [link-in-text-block](https://testingbot.com/support/accessibility/web/rules/link-in-text-block)
- [link-name](https://testingbot.com/support/accessibility/web/rules/link-name)
- [list](https://testingbot.com/support/accessibility/web/rules/list)
- [listitem](https://testingbot.com/support/accessibility/web/rules/listitem)
- [marquee](https://testingbot.com/support/accessibility/web/rules/marquee)