</>
ValidateHTML

Missing Form Labels

Every form input (text fields, checkboxes, selects, textareas) needs an associated label element. Without a label, screen reader users don't know what information to enter in the field. Placeholder text is NOT a substitute for a label because it disappears when the user starts typing and is not announced by all screen readers.

Why It Matters

Forms without labels are unusable for screen reader users, which is a WCAG 2.1 Level A violation. It also affects users with motor disabilities who rely on clicking the label to focus the input (larger click target). Bad form labeling leads to higher form abandonment rates for all users.

Common Causes

  • Relying on placeholder text as the only label, which disappears on focus and is not reliably announced.
  • Writing a <label> without a 'for' attribute that matches the input's 'id', so the two are never associated.
  • Styling a plain <div> or <span> as a label instead of using a real <label> element that assistive tech recognizes.

Code Examples

Inaccessible
<!-- No label at all -->
<input type="email" placeholder="Email address">

<!-- Label not associated with input -->
<label>Email</label>
<input type="email" id="email">
Accessible
<!-- Explicit label with for attribute -->
<label for="email">Email address</label>
<input type="email" id="email">

<!-- Implicit label (wrapping) -->
<label>
  Email address
  <input type="email">
</label>

How to Fix

  • 1Add a <label> element with a 'for' attribute matching the input's 'id' for every form field.
  • 2Alternatively, wrap the input inside the <label> element for implicit association.
  • 3Never rely on placeholder text as the only label. Placeholders disappear on focus.
  • 4For inputs where a visible label doesn't fit the design, use aria-label or visually-hidden text.

Frequently Asked Questions

Can I use placeholder text instead of a label?
No. Placeholders vanish as soon as the user types, are often too low contrast, and are not consistently announced by screen readers. WCAG requires a persistent label; a placeholder can supplement it but never replace it.
Does aria-label work as a substitute for a visible label?
It gives screen readers an accessible name, so it satisfies the programmatic requirement, but it provides nothing for sighted users. Prefer a visible <label>, and reserve aria-label for cases like icon-only or search inputs where a visible label does not fit.
How do I label a group of radio buttons or checkboxes?
Wrap them in a <fieldset> and describe the group with a <legend>, then give each individual input its own <label>. The legend provides the shared question and each label names the specific option.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker
Recommended

Cloudways · Managed Cloud Hosting

Fix accessibility errors, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean).

Free 3-day trial · 30% off 3 months + free site migration with code MIGRATE303

Start free trial

Related Accessibility Errors

Missing Alt Text on Images

Missing alt text hides images from screen readers and Google Images. Learn why alt attributes matter for accessibility and SEO, and how to write them well.

Missing Button Type Attribute

A missing button type attribute defaults to submit, causing accidental form submissions and data loss. Learn how to set the right button type every time.

Low Color Contrast

Low color contrast makes text hard to read for many users and fails WCAG AA. Learn the required contrast ratios and how to fix failing text and backgrounds fast.

View all accessibility errors