What This Rule Checks
Each form element, such as <input>, <textarea>, and <select>, must have a visible label that clearly describes its purpose. This helps users, especially those relying on assistive technologies like screen readers, to understand what information they need to provide.
For example, a text input field for “First Name” should have a visible label that says “First Name.” Without a proper label, a user using assistive technology wouldn’t know what to input.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Unlabeled form controls are one of the top 5 most common accessibility violations. Screen reader users hear “edit text” with no context about what to enter. Voice control users cannot target the field by name. This violates WCAG 1.3.1 and 4.1.2.
How to Fix
Use a <label> element explicitly associated with the form field via the for attribute. Alternatively, use implicit labeling by wrapping the form element inside the <label> element.
If a visible label is not needed, use aria-label or aria-labelledby to provide a name for assistive technologies.
Do not rely solely on placeholder text as a label.
Code Examples
<!-- Input with no label -->
<input type="email" id="email">
<!-- Label exists but not associated -->
<label>Email</label><input type="email" id="email">
Copy
<!-- Explicit label association -->
<label for="email">Email Address</label><input type="email" id="email">
<!-- Implicit wrapping label -->
<label> Phone Number <input type="tel"></label>
<!-- Using aria-labelledby -->
<span id="search-label">Search</span><input type="text" aria-labelledby="search-label">
Copy
Common Mistakes to Avoid
- Using placeholder text as the only label — placeholders disappear on input and have poor contrast.
- Having a <label> next to an input without a for/id connection.
- Hiding labels with display:none (use a screen-reader-only class instead).
- Using aria-label when a visible label would serve all users better.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.
Related WCAG Criteria
- 4.1.2: Name, Role, Value