Did a “Linked Image Missing Alternative Text” error or a Linked Image Empty Alternative Text” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of these errors, how it impacts your website’s accessibility, and how to fix it.
Table of Contents
- About the Linked Image Missing or Empty Alternative Text Errors
- What is a linked image?
- What is alternative text?
- How is alternative text added to images in WordPress?
- How is alternative text for linked images different than for non-linked images?
- How is missing alternative text different from empty alternative text?
- How does Accessibility Checker test for linked images with missing or empty alternative text?
- Impact on Accessibility
- How to Fix a Linked Image Missing or Empty Alternative Text Error
About the Linked Image Missing or Empty Alternative Text Errors
What is a linked image?
Linked images are images that perform a function when clicked or activated. Examples of common linked images include:
- the logo at the top of your website that links to your homepage,
- an icon that links to a page describing a service,
- a graphic designed to look like a button that submits a form when clicked or activated,
- social media icons that open sharing dialogues to make it easier to share a post or page to social media sites, and
- a photograph that opens up a larger version of itself when interacted with.
Linked images can trigger actions within the same page on the website or can redirect users to different websites completely. Linked images are contained in <a> (link) tags. Here is an example of basic code for the linked logo image in this web page’s header:
<a href="https://equalizedigital.com/"><img src="https://equalizedigital.com/wp-content/uploads/2020/09/equalize-digital-full-logo.png" alt="Equalize Digital Homepage"></a>The href attribute on the <a> tag controls where the user will go if clicking on the logo image and the src attribute on the <img> tag is the URL from which the logo image is displayed.
What is alternative text?
Alternative text is a short phrase that is included in HTML image tags and is used to describe the image being displayed on the web page.
Image alternative text, colloquially referred to as “alt text,” is visible to sighted users only if the image fails to load. Otherwise, it can be used to relay the contents of an image to a blind or visually impaired individual using a screen reader or to a search engine that is trying to understand the contents of a web page for search engine optimization purposes.
How is alternative text added to images in WordPress?
In WordPress, alternative text is commonly added without having to touch any code and can be edited via the media library, the relevant image block in the Gutenberg page editor, or via a visual page builder. How you can add and edit alt text in your website with vary based upon your specific WordPress setup.
If you’re unsure about how to add alt text to images in WordPress, there is more information in our Image Missing or Empty Alternative Text article.
How is alternative text for linked images different than for non-linked images?
For non-linked images, alternative text is used almost exclusively to describe the content of that image to screen reader users. It may also be displayed if images don’t load or someone has an image blocker installed.
In contrast, alternative text for linked images needs to describe the link action rather than the content of the image itself. Note that in the code example above, of the linked logo on our website, the alt attribute says alt="Equalize Digital Homepage" not “Equalize Digital logo”.
With linked images, it is most important that the alternative text conveys the purpose of the image not what the image literally is. The most important thing screen reader users need to know about the logo image in our website header is that it is a way to get to our home page, not that it is an image of our logo.
How is missing alternative text different from empty alternative text?
Missing alternative text means that your image does not have an alt attribute in the image tag at all. This is an example of an image in code that has a missing alt:
<img src="/dog.jpg">Empty alternative text means that you have an alt attribute with no text within it, I.e., your image tag has alt="" in it. Here is an example of an image in code with empty alternative text:
<img src="/dog.jpg" alt="">How does Accessibility Checker test for linked images with missing or empty alternative text?
While auditing your page or post content, Accessibility Checker will identify all images (<img>) that are contained in <a> tags, then checks to make sure that the image or link does not have role=”presentation” set and that the image is not hidden with aria-hidden. If the image is visible to screen readers and does not have an alt text defined or the alt attribute is missing completely, the applicable error will be flagged.
Impact on Accessibility
Why is alternative text for linked images important?
Alternative text for a linked image tells someone what action that link will perform if the user clicks the image. For people who use screen readers, this alternative text is essential because they cannot visually see the image and will not have any other way of knowing what the image is or where the link might point.
If an alt tag is missing completely from an image, some screen readers will attempt to compensate for the missing alternative text by reading the file name of the image. As you can imagine, in many cases, file names to provide meaningful or accurate information about the image or where the image is linked.
If the screen reader does not read the file name, then it may just announce “image”, “link”, or “clickable graphic” with no other information at all, which is equally confusing for blind and visually impaired users.
A note about ambiguous link text
Just link with anchor links, you want to avoid ambiguous text for linked images.
Ambiguous anchor text contains words or phrases that don’t make sense out of context. A link is considered ambiguous if a user has to read the text surrounding the link or see nearby images in order to know where the link will take them.
For example, the following are some commonly used phrases that would be considered ambiguous links as they have no meaning when taken out of context:
- Learn More
- Read More
- Click Here
- Go Here
- Here
- More
- Continue
- Keep Reading
These, and other similar phrases, are confusing to users of assistive technology who will often lack context surrounding the link when hearing them on their screen readers and thus will not know where a “click here” or “Keep Reading” link will take them. See the Ambiguous Anchor Text tooltip page for more on how to write meaningful link text for images.
Relevant WCAG 2.1 Success Criteria
1.1.1 Non-Text Content – Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with a few exceptions.
2.4.4 Link Purpose (In Context) – Level A
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
How to Fix a Linked Image Missing or Empty Alternative Text Error
What to do (in short)
To fix this error, you will need to add meaningful alt text to the images that flagged the Linked Image Missing Alternative Text or Linked Image Empty Alternative Text error, ensuring that all linked images have alt text that describes the function of the link.
How to find linked images with missing or empty alt text on your WordPress posts or pages
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have a Linked Image Missing Alternative Text or Linked Image Empty Alternative Text error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the applicable error to see a list of code that caused it to be flagged.
In the screenshot above, there is one image that has been flagged as having an empty alt attribute. This line of code is:
<a href="https://demosite.equalizedigital.com/?page_id=22"><img src="https://demosite.equalizedigital.com/wp-content/uploads/2020/11/notebook_icon.png" alt="" class="wp-image-187" width="125" height="125"/></a>In this example, the error is being flagged because the image has an empty alt attribute – alt="".
If this were your website, you would want to find the correct image and add alternative text that describes the function of the link. In this case, the image is a notebook icon that is linked to the blog page, so you could add alternative text to the icon that says “visit our blog page” (rather than noting that it’s an icon of a notebook, which is irrelevant to the link’s function).
Visit our Low-Quality Alternative Text article for more tips on writing meaningful alt text.
