WCAG 1.3.1 — Info and Relationships — Missing Form Labels

Who Is Affected

Screen reader users, voice control software users, users with cognitive disabilities who need clear form instructions, and users with motor disabilities who may rely on assistive technology to navigate and complete forms.

What This Means

Every form input (text fields, checkboxes, radio buttons, dropdowns) must have a programmatically associated label that describes its purpose. Screen readers announce these labels when users focus on form controls, allowing them to understand what information to enter.

Common failures include placeholder text used as the only label, visual labels that aren't programmatically connected to inputs, unlabeled search boxes, and form controls identified only by adjacent text without proper markup.

Fix: CMS / Theme

This typically occurs when form templates or theme components don't properly associate labels with inputs. A theme-level fix ensures all forms site-wide are accessible.

1. Locate form templates in your theme files or form builder plugin.
2. Add proper <label> elements with for attributes that match input id attributes:

   <label for="email">Email Address</label>
   <input type="email" id="email" name="email">
   

3. For complex forms, use ARIA techniques:
   • aria-labelledby to reference existing text elements as labels
   • aria-label for inputs where visible labels aren't practical
4. In Joomla: Check Extensions → Modules for custom form modules. Edit templates in Extensions → Templates → Your Template → Edit Files.
5. In WordPress: Review form plugins (Contact Form 7, Gravity Forms, etc.) and ensure their templates include proper label markup.

Fix: Content Editor

If you're embedding forms directly in content or using form shortcodes:

1. Review each form field to ensure it has a visible, descriptive label.
2. Remove placeholder-only labeling — placeholder text disappears when users start typing.
3. For contact forms or embedded widgets, check that the form code includes proper <label> tags.
4. Test with a screen reader or use the WAVE tool to verify labels are properly announced.

Quick check: Click on each form label. If clicking the label doesn't focus the associated input field, the connection is broken and needs to be fixed.

Standard Reference

WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships, Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

• W3C Understanding SC 1.3.1
• WCAG Technique G131 — Descriptive labels
• WCAG Technique H44 — Using label elements
• WCAG Technique H65 — title attribute for unlabelable controls
• WCAG Technique ARIA16 — aria-labelledby
• WCAG Failure F68 — Missing or incorrect association
• WCAG Failure F82 — Visually formatted as a label but not programmatically determined