How to Fix: Form fields have labels

Form fields have labels is an SEO check in the Accessibility (WCAG) category. It is a high-priority issue and should be addressed soon, because it sits on the exact overlap of three things Google now cares about: accessibility, usability, and clean, machine-readable markup. A form field with no label fails all three at once.

What this check is really about

Every input in a form — text box, checkbox, select, textarea — needs a programmatically associated label so that assistive technology can announce what the field is for. In HTML that means a real <label for="field-id"> tied to a matching id, or an aria-label / aria-labelledby where a visible label genuinely cannot exist. A placeholder is not a label — it vanishes the moment the user types, and screen readers treat it inconsistently. This check verifies that your forms use proper labels, not placeholder text pretending to be one.

Why it matters for SEO

• Legal and reputational risk. WCAG label requirements underpin accessibility law in many markets. An unlabelled contact form is a genuine liability, not just an SEO nitpick.
• Conversions. Forms are where revenue happens — contact, checkout, lead capture. A field that is confusing for a screen-reader user is often confusing on a small mobile screen too, and abandoned forms cost you directly.
• Signal quality. Clean, semantic form markup is part of the overall page-quality picture search engines assess. Sloppy markup rarely travels alone.
• Reach. Roughly one in five users has some accessibility need. A form they cannot complete is an audience you cannot serve.

How to Fix This in WordPress

Difficulty Level: EASY – This fix is straightforward and can typically be completed by anyone with basic WordPress knowledge.

Estimated Time: 20 min

Step 1: Turn labels back on in your form plugin

Most WordPress form plugins — Contact Form 7, WPForms, Gravity Forms, Fluent Forms — output proper labels by default. The failure usually comes from a designer hiding labels for a “cleaner” look and relying on placeholders. In your form builder, re-enable visible labels for every field, or at minimum switch hidden labels to a screen-reader-visible mode rather than removing them.

Step 2: Handle the fields that resist labels

A search box or a single-field newsletter signup sometimes has no room for a visible label. That is the one legitimate case for aria-label. Add it so the field still announces itself — never leave the input completely unlabelled just because it looks obvious to a sighted user.

Step 3: Test with the tools that do not lie

Run the page through Lighthouse (the Accessibility audit flags unlabelled fields directly) or the WAVE browser extension. Better still, tab through the form with your eyes closed using a screen reader for two minutes — you will hear every gap the tools describe.

Design “clean” without breaking the form

The root cause here is almost always aesthetic: someone decided visible labels looked cluttered. You can have both. Use the floating-label pattern, where the label sits inside the field and rises when the user focuses it — it stays in the DOM as a real <label> the whole time, so accessibility is intact while the design stays minimal. If you must hide a label visually, use a proper screen-reader-only class (a .screen-reader-text style that clips the element rather than display:none, which removes it from the accessibility tree entirely). The distinction between “visually hidden” and “removed” is the whole game.

My rule on any client build: a form ships only after it has been tabbed through end to end with a screen reader. It takes minutes and it catches the label problem, the focus-order problem, and the error-message problem in one pass.

Recommended Tools & Plugins

These tools can help you fix and prevent this issue:

• Yoast SEO – Comprehensive SEO plugin with built-in checks
• Rank Math – Feature-rich SEO plugin with detailed analysis
• Google Search Console – Free tool to monitor your site’s search presence
• SEO Roadmap – Complete SEO audit and action plan tool

Common Mistakes to Avoid

• Using placeholder text as a substitute for a label — it disappears on input and reads inconsistently.
• Hiding labels with display:none, which removes them from the accessibility tree entirely.
• Labelling most fields but forgetting checkboxes, radios, and selects.
• Shipping the form without ever testing it with a keyboard or screen reader.

Need More Help?

If you’re still having trouble, consider:

• Consulting with a WordPress developer or accessibility specialist
• Checking the WordPress support forums for similar issues
• Reviewing your form plugin’s accessibility documentation
• Running a complete site audit with SEO Roadmap for a prioritized action plan

This guide is part of the SEO Roadmap knowledge base – your complete resource for WordPress SEO optimization.