Did a “Duplicate Form Label” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.
About the Duplicate Form Label Error
What is a form label?
A form label is an HTML element used in forms to describe what the the various fields and controls in the form are for.
Regardless of the type of field you’re using, whether it is radio buttons, checkboxes, dropdown selects, or text fields, there must be a <label> element properly associated with the form field, either implicitly or explicitly. Labels can be visible above each field as shown in the following screenshot of the top of our Free Risk Assessment Form:
Or, labels can also be located below, next to, or even after each field, as shown in this screenshot of part of an email opt-in form:
Regardless of placement, properly formatted labels are necessary because they ensure that users of assistive technology like screen readers will know what to enter into each field. They also can provide a larger clickable area which helps people with lower dexterity, including the elderly, to move more easily through a form with both a mouse or on a touchscreen like a mobile phone.
How are labels associated with fields?
For most WordPress users, labels are added to fields as you build your form in whatever WordPress forms plugin you’re using. Usually, all you have to do is fill in a field on the form edit screen, like in this screenshot which shows the editing experience for a text field within the Gravity Forms plugin:
Once you have filled in the “Field Label” section for each field, your form plugin should display the label automatically.
If you’re hand-coding forms or pasting form code from elsewhere on the web, you want to make sure that you’re labeling controls appropriately for accessibility with <label> tags that use the for="" attribute to match the label with the <input>. The HTML code for associating labels explicitly with form controls looks like this:
<label for="firstname1">First name:</label>
<input type="text" name="firstname" id="firstname1"><br>
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>The above example shows the HTML code for the subscribe form image that was embedded earlier on the page containing a name field and subscribe checkbox. Note that the labels can either preceded or follow their associated input.
There are several other ways that you can label form controls in an accessible manner. These methods are outlined in W3C’s Web Accessibility Tutorials “Labeling Controls” if you would like to learn more.
What does the Duplicate Form Label error mean?
The Duplicate Form Label error shows up in Accessibility Checker when there is more than one form label associated with one field. In code a duplicate form label might look like this:
<label for="firstname1">Name</label>
<label for="firstname1">First:</label>
<input type="text" name="firstname" id="firstname1">How does Accessibility Checker test for duplicate form labels?
While auditing your page or post content, Accessibility Checker will look at all <input> tags and check to see if they are associated with <label>, either by using “for” or “id” attributes. If there are are more than one labels present on the page that have the same for attribute, then a Duplicate Form Label error will be flagged.
Impact on Accessibility
Why are multiple form labels problematic?
Form labels are necessary so that users of assistive technology will know what the field is for and will be able to successfully fill out the form.
If there are too many form labels present, a screen reader may not be able to successfully read the form fields to help a visually impaired user navigate through and complete the form.
Fields that have multiple labels associated with them are treated inconsistently across browsers and by various screen readers. Some screen readers read the first label, ignoring any subsequent labels, whereas other screen readers read the last label and still others read both labels. If a screen reader does not read both labels, then it may be unclear to users what information is supposed to go in the field.
Example accessibility problems from duplicate form labels
It goes without saying that if a person does not know what is supposed to be filled into each field, they cannot possibly complete the form. In the code example provided above (and repeated here) imagine the confusion that might result if a screen reader read only one and not both labels.
<label for="firstname1">Name</label>
<label for="firstname1">First:</label>
<input type="text" name="firstname" id="firstname1">- If a user heard only the first label, “Name,” they might think that they are supposed to enter their full name into the field.
- If a user heard only the last label, “First,” they would have to infer that this is asking for their first name. Likely they would need to have the screen reader read other fields in the form to them before they could be completely sure that the field is asking for their first name.
If visitors to your website cannot fill out forms on your website, they will not be able to inquire about services, make a purchase, contact you, sign up for your newsletter, or take any other actions that require a form fill. Not only does this limit their ability to fully engage with your website but it also reduces the possible audience for your products and/or services and will lower your conversion rate. Having properly labeled form fields are just as good for your business as they are for your website’s visitors.
Relevant WCAG 2.1 Success Criteria
1.1.1 Non-Text Content – Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with a few exceptions.
1.3.1 Info and Relationships – Level A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
2.4.6 Headings and Labels – Level AA
Headings and labels describe topic or purpose.
3.3.2 Labels or Instructions – Level A
Labels or instructions are provided when content requires user input.
4.1.2 Name, Role, Value – Level A
For all user interface components (including but not limited to: form elements, links, and components generated by scripts), 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.
How to Fix a Duplicate Form Label Error
What to do (in short)
To fix duplicate form label errors, you’ll need to determine how the field and form were created and then ensure that each field has only one label associated with it.
How to find Duplicate Form Label errors in WordPress
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have a Duplicate Form Label error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the applicable error to see a list of code that caused the error to appear.
In the example above, there is one Duplicate Form Label error and the detail view says: Duplicate label for=”firstname1″
If this were your website and it was not readily apparent to you which field has more than one label, you would want to look at the information contained in the for attribute to help identify the field. In this example, “firstname1” is your clue that the field that has more than one label is a name field.
Depending upon how the forms on your website are created, you may not have as obvious of ids to point you in the right direction. Many popular plugins use more generic input ids, so you’ll need to do a little more sleuthing.
WP Forms and Gravity Forms, for example, uses the form id in combination with a numbered field system like for="wpforms-75-field_1" and for="input_9_10" respectively. In these plugins, the id of the field is visible on your form edit screen, so all you have to do is look for field 1, etc., on your form edit screen.
If you are using a plugin to create the form that does not show you the field ids in edit mode, you may need to use inspect element in Firefox or Chrome developer tools to show you the HTML of the page so that you can match up the duplicate label with the field.
How to fix Duplicate Form Label errors
Once you have identified the field that has more than one label associated with it, then you need to edit the form or HTML code so that there is only one label. If you’re using a form building plugin that has incorrectly added two labels to a particular type of field, like our name field example, you can typically resolve the error by stopping using that field type and replacing it with a different field type that will accept the same information. (I.e., remove the name field and add a text field instead that you can use for collecting people’s names.)
If you have the ability to edit the code of the form directly, for example if you copy/pasted it from a third-party site, then you can just edit the code to only have one label. Our previously shown example, in this case, would become:
<label for="firstname1">First Name:</label>
<input type="text" name="firstname" id="firstname1">What if your forms have duplicate labels you cannot find or fix?
Depending upon how you have added forms to your WordPress website, it possible you may encounter fields with multiple labels that you cannot correct. This is less likely to happen with a form building plugin, but more likely to happen if you have embedded code that includes a form from a third-party source or if there is a minimally (or not at all) configurable form included in a different type of WordPress plugins, such as user registration or membership plugins, an email newsletter plugin, or e-commerce plugin.
In that case, you may need to choose a different plugin to use on your website or will need to contact the provider of the code you have used for assistance. If you encounter accessibility errors that are caused by a third-party plugin you cannot control, please reference “What to do if a Plugin You’re Using has Accessibility Errors” for ideas on how to proceed.
