Creating accessible forms with associated form labels

Lindsey Kopacz
InstructorLindsey Kopacz
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

We talk about how to go about getting rid of the error "Missing Form Label" from your accessibility reports and why it's import. In this lesson, we mention the visually hidden class, which you can read about here:

Wave Tool Extension:

For Chrome:

For Firefox:

Instructor: [00:00] Today, we have a contact form with four fields -- name, email, subject, and message. There's a problem with this though, if we use the Chrome extension WAVE tool. When we click on it, we will see we have four errors.

[00:16] When we take a look at those errors, you will see that they are all missing form labels for these fields. How do we fix this?

[00:24] First, let's take a look at the HTML. We have three inputs -- the name, the email and the subject -- and a text area, which is the message. We also have a Submit button. A lot of times, people will put the placeholder in as a makeshift label, but that does not help screen readers.

[00:47] How do we fix this? It's quite simple. I've already done some code to show you the fix, so let's comment this out. What we have here is a label for each input and text area. What I want you to take a note of is that the label has a four attribute that says name. It could be anything, they just have to be identical.

[01:10] If we save it and go back here and refresh, you'll see that we have a label now. If we want to keep the aesthetic the same, all we have to do is add a class to the label. I'm just going to speed up and do that for you.

[01:34] I've added that here. If we refresh this, and I used the WAVE tool, you'll see that I have now zero errors. Technically, the labels are still there in the HTML, they're just hidden off the screen.

[01:51] There is another alternative to doing this. What you can do here is wrap your inputs in a label. This is helpful if you don't want to have an ID for every single input. However, what's not as ideal for is it's a little bit harder to target it with visually hidden. I would only use this if you want the visual aesthetic of a label.

~ 15 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today