WCAG 3.3.2 — Labels or Instructions Missing for Form Inputs

Who Is Affected

Screen reader users who can't see visual cues, users with cognitive disabilities who need clear instructions, users with attention disorders who may miss unlabeled fields, and mobile users where visual context may be limited.

What This Means

Every form input must have either a proper label or clear instructions that explain what information the user should enter. This includes text fields, dropdowns, checkboxes, radio buttons, and file uploads. Simply having placeholder text or nearby visual text isn't sufficient — the label must be programmatically associated with the input so assistive technology can announce it.

Common failures include contact forms with only placeholder text ("Enter your name"), search boxes without labels, and complex forms that assume users can visually determine what each field requires.

Fix: CMS / Theme

This often occurs when your theme's form templates don't include proper labels or when form builder plugins generate incomplete markup.

Joomla Forms

1. Go to Components → Contact → Categories/Contacts to edit contact forms.
2. For custom forms, check Extensions → Modules or Components for your form builder.
3. Ensure each field has a "Label" setting filled in, not just "Placeholder."
4. Verify the label appears above or beside the input, not inside it.
5. For search forms, check your template's search module settings.

WordPress Forms

1. Go to your form plugin (Contact Form 7, Gravity Forms, WPForms, etc.).
2. Edit each form and verify every field has a visible label.
3. In Contact Form 7, use [text* your-name] with separate label text, not just placeholder "Your Name".
4. For WPForms/Gravity Forms, ensure "Field Label" is set and "Hide Label" is not checked.
5. Check Appearance → Widgets for search widget label settings.

Fix: Content Editor

If you're creating forms directly in page content:

1. Add a visible text label above or next to each form field.
2. If using HTML, wrap labels in <label> tags and connect them to inputs with matching for and id attributes.
3. For groups of related inputs (like radio buttons), add a fieldset with a legend describing the group.
4. Provide format examples for complex fields: "Phone (555-123-4567)" or "Date (MM/DD/YYYY)".
5. If the form requires specific information, add instructions at the top explaining requirements.

Example of proper labeling:

<label for="full-name">Full Name (required)</label>
<input type="text" id="full-name" name="full-name">

<label for="phone">Phone Number (optional, format: 555-123-4567)</label>
<input type="tel" id="phone" name="phone">

Standard Reference

WCAG 2.1 Success Criterion 3.3.2 — Labels or Instructions, Level A

Labels or instructions are provided when content requires user input.

• W3C Understanding SC 3.3.2
• WCAG Technique G131 — Descriptive labels
• WCAG Technique G162 — Positioning labels to maximize predictability
• WCAG Technique H44 — Using label elements
• WCAG Technique H71 — Fieldset and legend for form groups
• WCAG Failure F82 — Visually formatted text that is not in a label element