How to test your form for accessibility issues with the WAVE extension (video)

In this video, we’ll use the WAVE extension to test an example form for accessibility issues. We’ll also review how to fix each issue. The accessibility results we’ll cover are:

Empty form label error
Orphaned form label alert
Multiple form labels error
Missing form label error

After learning about form accessibility issues, the next step is to check a form on your own website. You can start finding form-related issues today with our Free Plan for the Pope Tech Web Accessibility Platform – up to 25 pages, free for life, and no credit card required.

Transcript

Forms are how your users interact with you. It’s important they’re accessible so users with disabilities can easily get in contact, subscribe, or make a payment with you.

The free WAVE extension can help test forms for proper labels, an important part of form accessibility.

In this video, we’ll use WAVE to go through an example form with accessibility issues. We’ll also cover how to fix each issue.

Check out our video, Test a form for accessibility, for a complete form accessibility checklist.

Two parts to a form field

Before we get into label accessibility issues, we need to cover what makes up a form field. Each form field has two parts: a label element and an input. The label is typically shown by the input field – it tells us what information to enter. The input is where the user types or selects information.

Labels and inputs need proper HTML to connect them. In this video, we use the “for” and “id” attributes to connect the label and input.

When labels and inputs are properly connected, assistive technology, like screen readers or speech recognition software, can announce or interact with the right label for each input.

Example introduction

Let’s get into our example.

Here’s a registration form. It has a name, email, password, and repeat password field. At the bottom is a Register submit button.

Activate WAVE extension

I have the free WAVE extension already installed. I’ll select the WAVE extension, and it shows on the left with the accessibility results for the page.

I’ll go from the Summary tab to the Details tab. I’m going to deselect all the results that don’t apply to the form’s labels.

Now, I’ll review the results that are in line with the form.

Empty form label error

The first field is Name. There is no text above the input, but there is an input field with placeholder text that says Name. Placeholder text doesn’t replace a label, so the first issue is an Empty Form Label error. This means there’s an HTML label element, but it doesn’t have any content, which is why we don’t see text above the input field.

If I go to the Order tab in WAVE, I can see the name input’s accessible name, or the name assistive technology would use for that input. It says “No accessible name,” which means there’s nothing there for assistive technology to interact with. To fix it, I need to add content that assistive technology can read. The easiest way is to add content in the label HTML element. This also adds the label visually.

Orphaned form label alert

The next issues are with the email field. Visually, it looks correct. There’s a text label above the input. But, the label has an Orphaned form label alert and the input has a Missing form label error.

The Orphaned form label alert means there’s a form label, but it isn’t connected with an input. It makes sense that the input has a missing form label because the input isn’t connected to the label. To fix it, I need to check the HTML to make sure the label and input are connected properly. In this case, the “for” and “id” attributes don’t match. The “for” was matched with the “name” attribute, but not the “id”, which is a common mistake. The “for” needs to match the “id” to connect the label and input. If I make them match, it’ll properly connect the label with the input. Now, this works visually and for assistive technology users.

Multiple form labels error

Next is the password field. The label has an accessibility result called form label. This result says a form label is present and correctly associated with an input. That’s good.

The password input does have an error, though. The error is Multiple form labels. This means this input is connected to multiple labels. If I go back to the Order tab, I can check how this affects the accessible name. The accessible name is “Password Repeat Password,” so it seems like it’s pulling in multiple labels for the accessible name.

Again, I’ll need to look at the HTML “for” and “id” attributes and make sure they’re right. The “for” attribute is the same for the Password and Repeat Password labels. This means the Password input was referencing both the Password and Repeat Password labels, which is why the accessible name was both of them.

I’ll update the Repeat Password “for” attribute from “psw” to “psw-repeat”. Now, the Repeat Password’s label “for” matches the Repeat Password input “id”.

Missing form label error

This also fixes the last Missing form label on the Repeat Password input since the Repeat Password label is properly connected to the Password repeat input with matching “for” and “id” attributes.

You’re ready to use the free WAVE extension to check your form’s labels.

Subscribe to Pope Tech for more accessibility videos.