Lesson 4: Empty Links

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

Next up, we're talking about empty links. In the context of The 2024 WebAIM Million report, this refers to: links that have the "href" attribute set, but do not have any text associated with them. It's reported that 44.6% of home pages tested had this error.

One way this error occurs is when an image is placed inside a link but does not have alternative text. So if you've gone through Lesson 2: Images Missing Alternative Text, you've learned about that error and maybe even already have them tracked!

This is the first of many examples you'll see in your journey how multiple facets of accessibility overlap. Not only do strategies overlap in who they accommodate, many errors and their resolutions do too, and they can build upon each other when learned in certain orders.

5-minute action steps

To find empty link 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:
   • "Linked image missing alternative text"
   • "Empty link"

For each empty link 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)

Analyzing the results

I won't reiterate what we discussed in this section during Lesson 2: Images Missing Alternative Text. I recommend resolving any errors you identified in that lesson first, since it can reduce the number of errors you identify in this lesson.

Still make note of the "Linked image missing alternative text" errors here though! It may feel redundant to do so, but multiple occurrences of the same errors tends to be how we decide which errors get fixed first. We also love to fix multiple errors in one motion! 😊

As for other empty link errors, it may take a little digging in the HTML to see what's going on. It's possible that the link is truly empty and should be removed, it may need to be placed in a different place in the HTML, maybe "aria-label" or "aria-labelledby" will do the trick. Plan to come back to this part since it can take more time.

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