For more information about how to fix broken skip links, examples, and related resources, visit our resolving empty heading errors article.
In the example content below, there’s an empty heading. For this activity, you’ll use the WAVE tool to find the error, and the Inspect tool to fix it. If you have empty heading errors, you’ll need to remove them in your website’s code or content management system.
- Use Chrome, Firefox, or Edge.
- Download the WAVE extension.
- Use the WAVE extension to run WebAIM’s WAVE tool on this page.
- Select the Details tab to see the empty heading error. The empty heading error right under the Title of Content heading in the example content section below.
- After reviewing the error, select the WAVE extension icon again to turn the WAVE tool off on this page. If you skip this step, you’ll lose your changes in the Inspect tool if you try to run WAVE again.
Now that you’ve run the WAVE tool, found the error, and turned the WAVE tool off, let’s fix it using Inspect. Remember, if you actually had this error, you would need to fix it in your website’s code or content management system.
- Locate the Title of Content heading 2 in the example content below.
- Right click on this heading and select Inspect.
- In the Inspect tool, right click on the empty <h5></h5> right below the <h2>Title of Content</h2> and select Edit as HTML.
- Erase <h5></h5>, and select outside the text box. It should now look like the code below.
<h2>Title of content</h2> <p>Right above this paragraph of content there is an empty heading.</p>
If you run the WAVE evaluation tool again, the heading error won’t be there. We just updated this in the inspect tool, so if you refresh the page, it will reset the code to have the empty heading error again.
You can use these steps to help you identify what’s going on and then make the update like we did here in your own website’s code.
Here is the example content to use with the steps above:
Title of content
Right above this paragraph of content there is an empty heading.