WCAG 4.1.2 — Name, Role, Value: Form Input Has No Accessible Label

Who Is Affected

Screen reader users, users with cognitive disabilities who need clear field identification, users with motor impairments who rely on voice control software, and users with low vision who depend on screen magnification.

What This Means

Every form input (text fields, dropdowns, checkboxes, radio buttons) must have a programmatically associated label that describes its purpose. Screen readers announce this label when the user focuses on the field, telling them what information to enter.

Without proper labels, screen reader users hear only "edit box" or "combo box" with no context about what data is expected. This makes forms impossible to complete, blocking access to essential government services like permit applications, tax payments, and service requests.

The label must be programmatically linked to the input using either the <label> element with a for attribute, or ARIA attributes like aria-labelledby or aria-label.

Fix: CMS / Theme

Most missing label issues stem from theme templates that create form elements without proper labeling markup. This affects all forms site-wide.

Joomla Fix

1. Go to Extensions → Templates → Your Template → HTML Overrides
2. Locate form-related override files (typically in /forms/ or /html/com_content/)
3. For each form field, ensure it has a proper <label> element:

   <label for="name">Full Name *</label>
   <input type="text" id="name" name="name" required>
   

4. If using custom form modules, check Extensions → Modules and edit any contact or custom forms
5. Save changes and test with a screen reader or axe DevTools

WordPress Fix

1. Go to Appearance → Theme Editor or use FTP to access theme files
2. Check common form template files:
   • contact-form.php
   • search.php
   • comments.php
   • Any custom form templates
3. Ensure each input has a corresponding label:

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

4. For contact form plugins (Contact Form 7, Gravity Forms), update form markup in the plugin settings
5. Save and test all forms

Fix: Content Editor

If you're adding forms through the content editor or using form builder plugins:

1. For inline forms in content:

   • Switch to HTML/Source view in your editor
   • Add <label> elements for each input field
   • Ensure the for attribute on the label matches the id attribute on the input

2. For form builder plugins:

   • Contact Form 7 (WordPress): Edit your form and add label elements above each field
   • Gravity Forms: In form editor, ensure each field has descriptive Field Label text
   • Joomla forms: Use proper label syntax in Custom HTML fields

3. Quick fixes for common patterns:

   • Placeholder text is NOT a replacement for labels
   • "Search" buttons need either visible text or aria-label="Search"
   • Checkbox/radio groups need fieldset with legend for the group question

Standard Reference

WCAG 2.1 Success Criterion 4.1.2 — Name, Role, Value, Level A

For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

• W3C Understanding SC 4.1.2
• WCAG Technique H44 — Using label elements
• WCAG Technique H65 — Using title attribute for form controls
• WCAG Technique ARIA16 — Using aria-labelledby
• WCAG Failure F68 — Programmatically determined name missing
• WCAG Failure F82 — Missing visible labels