Missing Form Labels

What This Means

Form labels are essential for accessibility. They tell users (especially those using screen readers) what information is expected in each form field. Missing or improperly associated labels make forms difficult or impossible to use for people with disabilities.

Impact:

• Screen reader users cannot understand form fields
• Voice control users cannot navigate forms
• Fails WCAG 2.1 Level A (1.3.1 Info and Relationships)
• May violate ADA/Section 508 compliance requirements
• Poor user experience for all users

How to Diagnose

Browser DevTools

1. Open DevTools (F12)
2. Go to Elements tab
3. Find form inputs
4. Check for associated <label> elements

Accessibility Tools

axe DevTools:

1. Install axe DevTools
2. Run accessibility scan
3. Look for "Form elements must have labels" violations

WAVE:

1. Use WAVE Web Accessibility Evaluator
2. Check for missing form label errors

Lighthouse:

1. Open DevTools > Lighthouse
2. Run accessibility audit
3. Check for label issues

Manual Testing

1. Click on the label text - does the input focus?
2. Use a screen reader - is the field announced correctly?
3. Check if placeholder is the only "label"

General Fixes

1. Use Proper Label Elements

Associate labels with for attribute:

<!-- Good: Explicit label association -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

Wrap inputs in labels:

<!-- Good: Implicit label association -->
<label>
  Email address
  <input type="email" name="email">
</label>

2. Don't Rely on Placeholders Alone

<!-- Bad: Placeholder as only label -->
<input type="email" placeholder="Enter your email">

<!-- Good: Label with optional placeholder -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

3. Use aria-label When Visible Label Isn't Possible

<!-- For icon-only buttons -->
<button aria-label="Search">
  <svg><!-- search icon --></svg>
</button>

<!-- For inputs with visible context -->
<input type="search" aria-label="Search products">

4. Use aria-labelledby for Complex Labels

<span id="name-label">Full name</span>
<span id="name-help">(as it appears on your ID)</span>
<input type="text" aria-labelledby="name-label name-help">

5. Group Related Fields with Fieldset

<fieldset>
  <legend>Shipping Address</legend>

  <label for="street">Street</label>
  <input type="text" id="street" name="street">

  <label for="city">City</label>
  <input type="text" id="city" name="city">
</fieldset>

6. Handle Hidden Labels Properly

<!-- Visually hidden but accessible -->
<label for="search" class="visually-hidden">Search</label>
<input type="search" id="search">

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Platform-Specific Guides

Common Mistakes

Placeholder as Label

<!-- Wrong -->
<input placeholder="Email">

<!-- Right -->
<label for="email">Email</label>
<input id="email" placeholder="you@example.com">

Missing ID/For Connection

<!-- Wrong: Label doesn't connect to input -->
<label>Email</label>
<input type="email" name="email">

<!-- Right: Connected via for/id -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

Duplicate IDs

<!-- Wrong: Multiple inputs with same ID -->
<label for="name">First name</label>
<input id="name">
<label for="name">Last name</label>
<input id="name">

<!-- Right: Unique IDs -->
<label for="first-name">First name</label>
<input id="first-name">
<label for="last-name">Last name</label>
<input id="last-name">

Verification

After fixing:

1. Run axe DevTools again - no label errors
2. Test with screen reader (NVDA, VoiceOver)
3. Click labels - inputs should focus
4. Tab through form - all fields announced correctly

Further Reading

• WCAG 1.3.1 Info and Relationships
• WebAIM: Creating Accessible Forms
• Global Accessibility Hub