Creating accessible forms with associated form labels

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.