Lesson 2: Images Missing Alternative Text

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

Yesterday, we talked about the most common automatically detected WCAG error according to The 2024 WebAIM Million report. Today, we're talking about second most common: missing alternative text for images.

It's reported that 54.5% of the top 1,000,000 home pages were missing alternative text for images. The report also found a 28% increase in the average number of images per home page. That's the largest increase yet, and more than triple the increase seen last year.

Despite this significant increase, the percentage of home pages missing alternative text for images decreased from 58.2% in the 2023 report. Let's keep up that momentum, shall we?

5-minute action steps

To find missing alternative text errors for a page:

1. Go to the webpage you want to test
2. Activate the WAVE extension
3. Click the "Details" tab or "View details" button
4. Uncheck all of the top-level checkboxes except for "Errors"
5. Within the "Errors" section, uncheck the ones that don't mention "missing alternative text" (there are 6 possible at the time of writing)

For each missing alternative text 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 the type of missing alternative text error it is (there are 6 possible at the time of writing)

Analyzing the results

When you (or the person/team responsible) are ready to resolve the errors found, there are multiple ways to do so depending on a few factors. What type of image is it? What purpose does it serve? What context is available nearby on the webpage?

The alt Decision Tree provided by the Web Accessibility Initiative (WAI) can help you figure out these factors and what action needs to be taken. It doesn't cover every case, but it does cover many.

And if determining what action needs to be taken isn't within your role, you've still made a great step towards improving image accessibility! The next step for you is to share your results.

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 images missing alternative text with WebAIM's WAVE tool, and these are some of my results."