Lesson 5: Empty Buttons

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

Today's lesson is very similar to yesterday's: Lesson 4: Empty Links. I considered putting them both in one lesson, then I reminded myself that what we're trying to do here is keep a sustainable pace. Can we put these two similarly named errors together? Yes. Should we? Not if it's going to slow down incremental progress.

Empty button errors are similar to empty link errors in how they're tested. Lucky for us, empty buttons are much less common than empty links according to The WebAIM Million report! It's not quite half, but close, at 28.2% of home pages tested having empty button errors.

5-minute action steps

To find empty button 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:
   • "Image button missing alternative text"
   • "Empty button"

For each empty button 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 any content inside of the button (e.g. icons, images, text)

Analyzing the results

Just like yesterday's lesson, you learn how to resolve one of these error types in Lesson 2: Images Missing Alternative Text. If you resolve "Image button missing alternative text" errors first, you'll have a lot less analysis to do for this lesson.

The other "empty button" errors may require some inspection of the HTML. In my experience, if there is content in a button but it's still detected as empty, there's often an 'aria-hidden="true"' accidentally hiding content or no "aria-label" where there needs to be one.

As you're hopefully getting into the habit of, don't spend too much time on this analysis yet. Make a plan to come back to it, or just pass along your notes to the person or team responsible for making these fixes.

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