Form Input Elements Must Have Labels

No Comments

Quick Reference

Element Code: AC-002

Issue: Form input fields are missing associated label elements

Impact: Screen readers can't identify field purpose, WCAG failure

Fix: Add label element with for attribute matching input id

Detection: axe DevTools, WAVE, Lighthouse

What Is This Issue?

Form inputs without labels are inaccessible to screen reader users who cannot see placeholder text or visual context. Every form field needs a programmatically associated label that describes what information should be entered.

Why This Matters

Accessibility

Screen readers announce labels when users focus on form fields. Without labels, users hear only the input type ("edit text") with no indication of what to enter.

Usability

Properly associated labels also create larger click targets, as clicking the label focuses the input. This benefits all users, especially on mobile devices.

How to Fix This Issue

Method 1: Explicit Labels (Recommended)



Method 2: Implicit Labels


Method 3: aria-label (for visually hidden labels)


Common Mistakes

  • Using placeholder as a substitute for labels (placeholders disappear when typing)
  • Labels not programmatically associated (for/id mismatch)
  • Hiding labels visually without making them accessible

TL;DR (The Simple Version)

Your form fields don't have labels. Screen readers can't tell users what information to enter. Add a label element for each input and connect them using matching for and id attributes.

About SEO ProCheck

Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.

Work With Me

Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.

Subscribe to our newsletter!

More from our blog