FeaturesPricingAudit GuideFree StatementDashboard →

Fix Missing or Unassociated Form Labels

Learn how to properly label form fields for accessibility. Includes HTML, React, WordPress, and Shopify code examples.

6 min read
critical severityWCAG Level AWCAG 2.1 Success Criterion 1.3.1 and 3.3.2Manual review needed

What Is It?

A form label is text associated with an input field that describes what the input is for. Labels must be programmatically connected to inputs using the <label> element with a matching 'for' attribute.

Affected users: Screen reader users, voice control users, motor disability users, cognitive disability users, everyone on mobile devices with small screens

Why It Matters

Screen reader users cannot see input fields, so they rely on labels to understand what each field expects. Without labels, users can't navigate forms effectively. Properly labeled forms also reduce errors.

How to Detect This Issue

Inspect form fields and check if each <input>, <textarea>, or <select> has a corresponding <label> with matching 'for' and 'id' attributes. Test with a screen reader.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<input type="email" placeholder="Enter your email"> <input type="password" placeholder="Enter your password">
After (accessible)
<label for="email">Email Address</label> <input type="email" id="email" name="email"> <label for="password">Password</label> <input type="password" id="password" name="password">

The 'for' attribute on <label> must match the 'id' on <input>. This creates a programmatic association that screen readers understand.

React / Next.js

Before
<input type="text" placeholder="Full name" />
After
<label htmlFor="fullName">Full Name</label> <input type="text" id="fullName" name="fullName" />

In React, use htmlFor instead of for. Make sure id, htmlFor, and name are consistent. Consider using controlled inputs with proper labeling.

WordPress

Before
Contact form with text fields but no visible labels, only placeholders
After
Contact form with proper <label> elements associated to each input field via id and for attributes

In WordPress form plugins like WPForms or Gravity Forms, enable 'Display Label' option. Avoid relying only on placeholders for labels.

Shopify Liquid

Before
<input type="email" placeholder="Email"> <input type="password" placeholder="Password">
After
<label for="email-input">Email</label> <input type="email" id="email-input"> <label for="password-input">Password</label> <input type="password" id="password-input">

Edit Shopify liquid templates to add proper label elements. Ensure form field IDs are unique across the page.

Common Mistakes

✗

Using only placeholder text instead of labels (placeholders disappear when user types)

✗

Label text exists but isn't associated with input using 'for' and 'id' attributes

✗

Using the same 'id' for multiple inputs on the same page (IDs must be unique)

✗

Forgetting to add labels to required fields

✗

Using labels visually hidden with display: none (should use sr-only class instead)

Frequently Asked Questions

Can I use placeholder text instead of labels?
No. Placeholders disappear when users type, so they can't see what the field is for. Placeholders can supplement labels but never replace them.
What if my design doesn't have room for visible labels?
Use the sr-only (screen reader only) CSS class to hide labels visually while keeping them accessible to screen readers: <label class="sr-only">Email</label>
Do I need labels for every input?
Yes, every input needs a label. Even if you use placeholder text or aria-label, also add a <label> element for full compatibility.
How do I label grouped inputs like radio buttons or checkboxes?
Use <fieldset> to group related inputs and <legend> to label the group: <fieldset><legend>Choose a subscription plan</legend><input type="radio">....</fieldset>

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides