Level A
Understandable
WCAG 2.0+
Success Criterion 3.3.2: Labels or Instructions
Official W3C Definition
Labels or instructions are provided when content requires user input.
Why This Criterion Matters
Users need to know what information to enter in form fields. Without clear labels or instructions, users may enter incorrect data, leave required fields empty, or abandon the form entirely. This is especially critical for screen reader users who cannot see visual context clues.
Who Benefits
Blind Users
Rely on labels to understand what each field requires.
Cognitive Disabilities
Clear instructions reduce confusion and errors.
Non-Native Speakers
Clear labels help with language comprehension.
Everyone
Good labels improve usability for all users.
How to Meet This Criterion
Technique 1: Visible Labels
Good Example - Proper Labels
<!-- Good: Explicit label association -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<!-- Good: Required field indication -->
<label for="name">
Full Name <span class="text-danger">*</span>
<span class="visually-hidden">(required)</span>
</label>
<input type="text" id="name" name="name" required>
<!-- Good: Implicit label (wrapping) -->
<label>
Phone Number
<input type="tel" name="phone">
</label>Technique 2: Format Instructions
Good Example - Help Text
<!-- Good: Format hint below field -->
<label for="phone">Phone Number</label>
<input type="tel" id="phone" aria-describedby="phone-hint">
<div id="phone-hint" class="form-text">
Format: (123) 456-7890
</div>
<!-- Good: Password requirements -->
<label for="password">Create Password</label>
<input type="password" id="password" aria-describedby="pwd-reqs">
<div id="pwd-reqs" class="form-text">
Password must be at least 8 characters with one uppercase letter,
one number, and one special character.
</div>Technique 3: Group Labels
Good Example - Fieldset and Legend
<!-- Good: Related fields grouped with fieldset -->
<fieldset>
<legend>Shipping Address</legend>
<label for="street">Street Address</label>
<input type="text" id="street">
<label for="city">City</label>
<input type="text" id="city">
<label for="state">State</label>
<select id="state">...</select>
</fieldset>
<!-- Good: Radio button group -->
<fieldset>
<legend>Preferred Contact Method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
<label><input type="radio" name="contact" value="mail"> Mail</label>
</fieldset>
Bad Examples
<!-- Bad: No label, only placeholder -->
<input type="text" placeholder="Enter your name">
<!-- Bad: Label not associated with input -->
<span>Email:</span>
<input type="email">
<!-- Bad: Hidden label with no alternative -->
<label class="hidden">Search</label>
<input type="search">
<!-- Bad: No format instructions for complex input -->
<label for="date">Date</label>
<input type="text" id="date"> <!-- What format? -->Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Placeholder instead of label | Disappears when typing; hard to see | Use visible label; placeholder is optional extra |
| Missing for/id association | Clicking label doesn't focus input | Match for attribute to input id |
| No format instructions | Users don't know expected format | Add help text with aria-describedby |
| Required indicator not explained | Users may not understand * meaning | Add "* Required" legend at form start |
| Radio buttons without group label | Users don't know what group represents | Use fieldset with legend |
Testing Methods
Manual Testing Steps
- Check every input: Does each have a visible label?
- Click labels: Does clicking the label focus the input?
- Screen reader test: Is the label announced when focusing input?
- Check required fields: Is it clear which are required?
- Check format requirements: Are complex formats explained?
Related Criteria
1.3.1 Info and Relationships
Structure must be programmatically determinable
3.3.1 Error Identification
Identify and describe input errors