Creating accessible forms with associated form labels

Use Semantic HTML to Improve Hamburger Menu Accessibility

Create Custom Keyboard Accessible Checkboxes

Expand a Menu on a focus Event to Improve Navigation Accessibility

Collapse a Submenu on the blur Event to Improve Navigation Accessibility

Accessibility Tips & Tricks

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: https://a11yproject.com/posts/how-to-hide-content/.

Wave Tool Extension:

For Chrome: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US

For Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/

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.

Course

Accessibility Tips & Tricks

Creating accessible forms with associated form labels

Share this video with your friends