WCAG 3.3.2: Labels or Instructions
Labels or instructions must be provided when content requires user input. Every form field needs a visible label. Placeholders are not labels. Required fields should be indicated, and expected format should be described.
What is WCAG 3.3.2 Labels or Instructions?
WCAG 3.3.2 Labels or Instructions is a Level A web accessibility success criterion under the Understandable principle. Labels or instructions must be provided when content requires user input. Every form field needs a visible label. Placeholders are not labels. Required fields should be indicated, and expected format should be described. Common failures include using placeholder text as the only label (disappears on input) and form fields without any visible label. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Check that every form input has a visible <label> element
- ✓ Verify labels are programmatically associated (for/id or wrapping)
- ✓ Check that required fields are indicated (not just with color)
- ✓ Verify expected input format is described (e.g., 'MM/DD/YYYY')
- ✓ Test with a screen reader to verify labels are announced
Common Failures
- ✗ Using placeholder text as the only label (disappears on input)
- ✗ Form fields without any visible label
- ✗ Labels not programmatically associated with their inputs
- ✗ No indication of required fields or expected format
- ✗ Using title attribute as a label substitute
✓ Good Example
<div> <label for="phone">Phone number (e.g., 555-123-4567)</label> <input id="phone" type="tel" required aria-required="true"> <span class="required-hint">* Required</span> </div> <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> </fieldset>
The phone input has a visible label with format hint, is marked as required, and uses aria-required. The radio group uses a fieldset/legend for group labeling.
✗ Bad Example
<!-- Placeholder as label --> <input type="tel" placeholder="Phone number"> <!-- No fieldset/legend for radio group --> <p>Contact method:</p> <input type="radio" name="contact" value="email"> Email <input type="radio" name="contact" value="phone"> Phone
The phone input uses only a placeholder which disappears when typing. The radio buttons have no programmatic group label and are not wrapped in label elements.
Test Your Site for 3.3.2 Compliance
Use our free accessibility tools to check your website against WCAG 3.3.2.
Open Testing Tool