Label Form Fields (Pro)

This fix is only available in paid versions of Accessibility Checker.

Does your WordPress website have forms with unlabelled fields? Ideally, you can fix this by editing the labels in your form builder. However, there are some instances where you may be unable to fix field labels without editing the code. This article explains how Accessibility Checker can help you add labels to unlabelled form fields in your WordPress site without editing code.

How to Add Labels to Unlabelled Form Fields in WordPress

If your website has unlabeled form fields, we recommend first checking to see if the plugin creating the form can correct this. If you’re unable to fix field labels within plugin settings or the form is being embedded from a third-party site, this accessibility issue can be easily fixed without writing code using the WordPress Accessibility Checker plugin.

Step 1

Click into the Accessibility Checker plugin settings in your WordPress dashboard (you must be logged in with an administrator account to access these settings).

Step 2

Go to the “Fixes” tab in the Settings Tabs navigation.

Step 3

Check the box for Label Form Fields, then scroll to the bottom of the page and click the “Save Changes” button.

Note: Automated accessibility fixes use JavaScript or other methods to modify how your website functions. Occasionally, a WordPress theme or extension may conflict with or prevent our fixes from working as expected. We recommend testing these fixes on a local or staging copy of your website first.

Not seeing the fix?

The Label Form Fields accessibility fix should start working immediately; however, if you don’t see the fix, it could be because you’re seeing a cached version of your website. Try clearing the cache in any caching plugins and on your hosting account, then look at your site in an incognito window to confirm the fix worked.

Note: Turning on a fix will not instantly remove related issues from Accessibility Checker reports. After turning on a fix, you can clear issues from reports by running a full site scan in Accessibility Checker Pro or by saving any individual post/page to trigger a rescan of that post/page only.

Want to style the label?

If you want to style the labels that are output by this fix, you add custom styles targeting the .edac-generated-label class in your theme or builder CSS.

What This Fix Does

When enabled, the Label Form Fields fix looks for web form elements, such as input fields, dropdowns, and text areas, that are missing labels. If unlabelled fields exist, Accessibility Checker will attempt to determine their purpose and, if possible, generate a visible label above the field.

The Label Form Fields fix will generate labels from the first available of the following (looking at information in this order):

1. aria-label
2. placeholder text
3. title attribute
4. name attribute

To help improve readability, the Label Form Fields fix will do some basic clean up text before displaying it as a label on the front end, including:

• Replace underscores with spaces.
• Splits camel case words with spaces.
• Capitalize the first letter of words.

Here is an example of an improperly labeled form field that Accessibility Checker would attempt to detect and resolve:

<input type="text" placeholder="First Name">

In this example, Accessibility Checker would take the placeholder text and add that exact text as a label in the source code:

<label for="first-name">First Name</label>
<input type="text" id="first-name" placeholder="First Name">

Impact on Accessibility

Properly labeled form fields are crucial for web accessibility. They ensure that assistive technologies, like screen readers, can effectively communicate the purpose of each field to users. This improves the user experience for individuals with visual impairments, cognitive disabilities, and other challenges.

Without form labels, a screen reader will only read out the field type. For example, when encountering a text field that has an empty label, a screen reader might say only “Edit,” “Edit has auto-complete,” or “Edit text, blank.”

While we’ve acknowledged the impact of form field labels for assistive technology users, it’s equally important to note that having clear, consistent, and visible labels on all web forms will make the experience easier for all users. Data shows that the more usable a website’s forms are, the higher the conversion rate.

Associated Checks

The following checks in Accessibility Checker are associated with this fix:

Empty or Missing Form Label