Did an “Empty Form Label” or “Missing Form Label” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of these errors, how they impact your website’s accessibility, and how to fix them.
Table of Contents
- About the Empty Form Label and Missing Form Label Errors
- Impact on Accessibility
- How to Fix an Empty or Missing Form Label Error
About the Empty Form Label and Missing Form Label Errors
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 control, either implicitly or explicitly. Labels can be visible above each field, as shown in the following screenshot of the top of this 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 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.
If you ran an accessibility checker on your website and it’s telling you there are empty form labels or missing form labels for one of you forms, but you can see something that looks like a label for that field, it could be that the label is not correctly associated with the field.
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, using a fome plugin like Contact Form & that requires you to provide the HTML, or pasting form code from elsewhere on the web, you want to make sure that you’re labeling form fields appropriately for accessibility. This is done with <label> tags that use the for="" attribute to match the label with the <input> by referencing the ID.
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 shown earlier on this page, that, which contains a name field and subscribe checkbox. Note that the labels can either precede or follow their associated input.
You can also connect a form label with an input by wrapping the label tag around the input like this:
<label>
First name:
<input type="text" name="firstname">
</label>
<br>
<label>
<input type="checkbox" name="subscribe">
Subscribe to newsletter
</label>You can label form controls in several other ways in an accessible manner. These methods are outlined in W3C’s Web Accessibility Tutorials “Labeling Controls” if you would like to learn more.
What qualifies as an empty form label?
An Empty Form Label error is triggered when a <label> tag is present in your form and associated with an input (form field), but does not contain any text. Here is an example of an empty label in code:
<label for="firstname"></label>
<input type="text" name="firstname" id="firstname">Form labels are also considered empty if they wrap around the <input> tag and contain no other text like this:
<label>
<input type="text" name="firstname" id="firstname">
</label>
What qualifies as a missing form label?
A Missing Form Label error is triggered when an <input> (form field) is present in your form and but is not associated with a <label> element. This could look like this where the label is visually present but is missing a for="" attribute to connect it to the applicable field:
<label>First Name</label>
<input type="text" name="firstname" id="firstname">Or there could be no label present at all and only an <input> tag.
<input type="text" name="firstname" id="firstname">How does Accessibility Checker test for empty and missing 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 a <label>, either by using “for” or “id” attributes, or by wrapping the label tag around the field <input>.
If an input on the page does not have an associated label, a Missing Form Label error will be flagged.
For all <label> tags that have a corresponding <input>, Accessibility Checker looks to see if there is text contained within the <label> tag. If there is no text or only spaces are inside the label tag, an Empty Form Label error will be flagged.
Impact on Accessibility
Why are form labels important?
Form labels are necessary so that users of assistive technology will know what the field is for and will be able to fill out the form successfully.
Without form labels, a screen reader will only read out the type of the field. 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.”
PowerMapper has a useful page on their website where they have documented what the major screen readers say when presented with an empty form label. If you go to that page, you can hear a recording of what different screen readers in different browsers say when encountering empty 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.
Approximately 12 million people 40 years and over in the United States have vision impairment, including 1 million who are blind, 3 million who have vision impairment after correction, and 8 million who have vision impairment due to uncorrected refractive error.
CDC Fast Facts of Common Eye Disorders
If visitors 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 submission. This will not only limit their ability to engage with your website fully but also reduce the possible audience for your products or services and lower your conversion rate. Form labels are just as good for your business as for your website’s visitors.
Placeholder text is not a substitute for empty or missing form labels
Designers commonly design forms for websites that do not show the form labels and instead use placeholder text within the field to indicate what the field is for. This is especially common for short forms with few fields, like email newsletter signup forms, but we’ve seen this technique used even in very long forms.
Though we understand the design value of a cleaner, more minimalistic appearance, it is incorrect to use placeholder text as a replacement for labels.
Screen readers and other assistive technologies do not treat placeholder text as labels, which means that they do not always read or announce the presence of placeholder text. Placeholder text is not broadly supported across assistive technologies, and many older browsers do not display placeholder text at all. Thus, both sighted and blind users could be left without knowing what the field is for if there is not also a label for that field.
In addition to not being universally supported by assistive technologies, placeholder text is also bad for accessibility because:
- Placeholder text is meant to provide an example of the expected input in the field, not to describe the field’s name. The appropriate placeholder text for an email address field is “name@website.com,” not the words “email address.” Adding the field’s name rather than an example could be confusing to users.
- Placeholder text disappears as text is typed or entered in the fields. This causes a number of problems as a result:
- If there are no form labels present and the placeholder text has disappeared, the user will have no way of confirming that they have properly filled out the form before hitting submit.
- Disappearing placeholder text is especially frustrating if the browser’s autocomplete function fills multiple fields automatically—in this case, the user would have to delete the autocompleted information to ensure it was filled out correctly and then manually retype the answers.
- If an error occurs on the form, the user will not know how to fix the problem.
- Placeholder text is usually displayed with lower color contrast than text provided by users and may not meet color contrast standards for accessibility, making it hard for elderly or visually impaired users to read.
- Sometimes placeholders do not disappear when users move their input focus into the field. If the placeholder text remains in the field as editable text, the user will have to manually select and delete it, creating extra work before the form can be submitted.Â
These four accessibility problems impact all visitors to your website, not just users with disabilities.
The Nielsen Norman Group, experts in research-based user experience, has an excellent article, “Placeholders in Form Fields Are Harmful,” which provides additional information about why you should never use placeholder text because the resulting loss in useability will also decrease conversion rates. You can also see examples of problems caused by placeholders in Smashing Magazine’s “Don’t Use The Placeholder Attribute” article.
What if I really want to hide my form labels for aesthetic reasons?
Unfortunately, there is no way to hide form labels and have an accessible form. There are tutorials on the web for making hidden form labels available to screen readers, which does make them accessible to blind and visually impaired users of screen readers, however this does not resolve the issues described above about how missing form labels can negatively impact sighted users.
All people need to be able to easily fill in the forms on your website, and visible labels are necessary for that.
If you’re hoping to have a more modern or minimalistic design, there are great ways to accomplish that aesthetic without removing form labels. One possible solution to explore is having floating labels that are positioned as a placeholder but that then move up when the field is typed into.
Relevant WCAG 2.1 Success Criteria
1.1.1Â Non-text Content – Level A
If non-text content is a control or accepts user input, then it has a name that describes its purpose.
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 an Empty or Missing Form Label Error
What to do (in short)
To fix empty or missing form label errors, you’ll need to determine how the field and form were created and either add text to your existing field label or add field labels if they are missing completely.
How to find and fix Empty Form Label and Missing Form Label errors in WordPress
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have either an Empty Form Label error or a Missing 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 the fields that caused the error to appear.
The above screenshot shows an example of a form label that has been flagged as empty. This particular example is a label within a WP Forms form. Ideally, you only have one form plugin on your website and one form per post or page, but if you have multiple and are not sure what label this is referencing you can look at the code for clues.
<label class="wpforms-field-label wpforms-label-hide" for="wpforms-75-field_1"> </label>In this code snippet, we can clearly see “wpforms” in the label’s class which tells us this label is part of a form built in WP Forms. The for attribute provides is with the unique field ID which is sometimes helpful in finding the specific field as some plugins display the field ID in their backend form builder. WP Forms does not, unfortunately, but you likely don’t actually need to know which field this is by ID as it should be visually obvious to you when looking at your form if there are labels missing.
If you see a missing or empty form label error in Accessibility Checker, the best course of action is to open your form builder and add labels to all fields in every form or ensure that any options within the form settings to hide labels are unselected.
What if your forms have missing or empty labels you cannot find or fix?
Depending upon how you have added forms to your WordPress website, it possible you may encounter empty or missing form 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 plugin, such as a user registration or membership plugin, 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.
