Lesson 3: Inputs Missing Labels

Quick note: In many lessons, we'll be using a tool from WebAIM called WAVE. I personally prefer using the browser extension. You can also go to the WAVE home page and enter your web page address there to run the same tool (unless the webpage you provide blocks automated scripts from running on the website).

Background

Based on Lesson 1 and Lesson 2, if you guessed that today we're tackling the third most common automatically detectable accessibility error according to the 2024 WebAIM Million report, you guessed correctly! 48.6% of home pages tested had these errors.

Hopefully you're enjoying this approach of learning in parallel with the beginning of the report. It says that 96.4% of all the automatically detectable errors fall into just 6 categories. After today, we're already halfway done covering these initial categories!

5-minute action steps

To find missing form label errors for a page:

1. Go to the webpage you want to test
2. Activate the WAVE extension
3. Click the "Details" tab or the "View details" button
4. Uncheck all of the top-level checkboxes except for "Errors"
5. Within the "Errors" section, uncheck everything except "Missing form label"

For each missing form label error identified:

1. Click its icon in the "Details" tab so the webpage will scroll to the element with the issue
2. Make note of where the element is in the page (e.g. top right, bottom left, halfway down)
3. Make note of whether or not there is text nearby that visually appears to be a label

Analyzing the results

The first part of the analysis just requires checking the text near a form input. If there's text that visually appears to be a label but there's a "missing form label" error identified, it's likely that the HTML label element isn't being used or it's not been connected to the form input correctly.

The next step of the analysis requires some knowledge of HTML and how to inspect it from a browser's devtools. Is the HTML element being used? Is the label visible? Is it in the Accessibility Tree? Does it have the "for" attribute set to the "id" of the form input? Alternatively, is there an HTML element that the form input can reference via the "aria-labelledby" attribute?

But don't spend too much time on this part yet. Just gather the immediate context avaiable, and make a concrete plan to dig in soon when you know you (or the person/team responsible) will have the time. The process can feel tedious at first, but I promise it gets easier after a few times of practice!

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to test for inputs missing labels with WebAIM's WAVE tool, and these are some of my results."