Code Fix Guide

How to Fix Missing Form Input Labels

Missing form labels are found on 45%+ of all websites. When a form field lacks a programmatically associated label, screen reader users have no way to know what information to enter. Placeholder text alone is not a substitute for a proper label.

Common Errors and How to Fix Them

Input with placeholder but no label
Problem
<input type="text" placeholder="Enter your email">
Fix
<label for="email">Email address</label>
<input type="text" id="email" placeholder="Enter your email">
Input with no label or placeholder
Problem
<input type="text" name="phone">
Fix
<label for="phone">Phone number</label>
<input type="text" id="phone" name="phone" autocomplete="tel">
Visual label not programmatically associated
Problem
<div>Name</div>
<input type="text">
Fix
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
Search input without a label
Problem
<input type="search">
Fix
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" aria-label="Search">

Why This Matters

Missing labels violate WCAG 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions). Screen readers rely on the <label> element's 'for' attribute matching the input's 'id' to announce what each field expects. Without this, forms are essentially unusable for visually impaired users.

Find All Your Accessibility Issues Automatically

ADA CodeFix scans your website for WCAG 2.1 AA violations and generates AI-powered code fixes — not vague descriptions, actual code you can copy-paste.

Scan Your Site Free
No credit card required AI-generated code fixes