Posted on

Fix a linked image missing alt text

For more information about how to fix linked images missing alt text, examples, and related resources, visit our resolving linked image missing alt text errors article.

Activity steps

In the steps below, there is a linked image with missing alt text. In this activity, you’ll use the WAVE tool to find the error, and the Inspect tool to fix it. If you have linked images missing alt text errors on your website, you’ll need to update them them in your website’s code or content management system.

  1. Make sure you’re on Chrome or Firefox.
  2. Download the WAVE extension.
  3. Use the WAVE extension to run WebAIM’s WAVE tool on this page.
  4. Select the Details tab to see the linked image missing alt text error. It’s the image right below this step.
  5. 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.

  1. Right click on the image above, and select Inspect.
  2. In the Inspect tool, right click on the <img> tag and select Edit as HTML.
  3. Add an alt tag that describes the image and where it links to. Select outside the text box to apply the update. The alt tag is already there as alt=””, so you just need to add the descriptive text to it. It should now look like the code below.
<img loading="lazy" width="2612" height="1368" class="wp-image-3383" style="width: 600px;" src="https://blog.pope.tech/wp-content/uploads/2021/11/Screen-Shot-2021-11-23-at-9.22.33-AM.png" alt="WAVE accessibility result. Open the WAVE tool.">
Image missing alt text with the inspect tool open showing the solution.

Now, if you run the WAVE evaluation tool again, the 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 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.