Did an “Image Empty Alternative Text” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this warning, how it impacts your website’s accessibility, and how to fix it.
Table of Contents
- About the Empty Alternative Text Warning
- Impact on Accessibility
- How to Fix or Resolve Image Empty Alternative Text Warnings
About the Empty Alternative Text Warning
What is alternative text?
Alternative text is a short phrase included in HTML image tags that describes the image 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?
Alternative text is added to an image tag by placing it inside the alt attribute, for example:
<img src="https://equalizedigital.com/wp-content/uploads/2020/11/corgi-laptop-1024x1024.jpg" alt="cute corgi laying in front of open laptop on bed and looking happily at camera">The code example above shows the web address from which the following picture is displayed and the alt text that we have used to describe the image, which is “cute corgi laying in front of an open laptop on the bed and looking happily at the camera.”
In WordPress, alternative text is commonly added without touching any code and can be edited via the media library, the relevant image block in the Gutenberg page editor, or a visual page builder. How you can add and edit alt text on your website varies based on your specific WordPress setup.
This image shows where to edit alternative text in the Gutenberg block editor:
How does Accessibility Checker test for missing alternative text?
While auditing your page or post content, Accessibility Checker will identify all images (<img>) and <input> tags with a type of image and check to see if they have an alt attribute and confirm that the following is true:
- the image does not have role=”presentation”,
- the image does not have an aria-hidden attribute,
- the image is not a 1×1 spacer pixel,
- the image is not generated by Google ads code,
- if the image is in a link (
<a>tag) it does not have a valid aria-label, or - that the image is not contained within a valid caption.
If none of the above are true and there is an alt tag but it contains no text, an Image Empty Alternative text warning will be flagged.
If there is no alt attribute at all and none of the above apply, then it will result in an Image Missing Alternative Text error.
Impact on Accessibility
Why is alternative text important?
Alternative text, when correctly added to an image, conveys meaning about what the image is to people who cannot see it. Generally, in order to convey meaning and improve the user experience on the site, alternative text should be an accurate description of the image or the purpose of the image in the case of a linked icon. Only images that are purely decorative in purpose and add no value to the content on the page should have an empty alt attribute. No images should have a missing alt attribute.
Empty alt tags and accessibility
Generally, if the alternative text is empty, screen readers will skip over it, not relaying that an image is present to blind and visually impaired users. Empty alternative text is correct for decorative images so that assistive technology users are only presented with the information that matters as they move through the page, not slowed down by announcements of “border” or “decorative accent.”
People who are blind are not able to quickly skim a web page when it loads. They need to have their screen reader read them out all of the information on the page, and any extraneous information can increase the time it takes for them to find what they’re looking for and slow them down. It is important to only present information to screen readers that is a vital part of the meaningful content on the page.
Therefore, if an image is truly decorative and does not provide anything meaningful to the content of the page it is correct for the alternative text to to be left empty. However, if an image adds the content in a meaningful or illustrative way, then the alt text should be filled in so that blind people do not miss out on the context or information the image provides.
Decorative vs. non-decorative images
As mentioned above, decorative images, like borders, small color swatches, or image backgrounds, should have an empty alt tag in order to be properly accessible. Alternative text is not necessary and it is correct to leave the alt attribute empty on decorative images so that screen readers will skip over the image and not announce its presence.
Below is a screenshot that shows two different images on a page about ice cream sundaes. There is a heading, “Ice Cream Sundaes,” followed by an image that looks like triangle bunting running across the page. Below the bunting image is a photograph of an ice cream sundae with hot fudge, sprinkles, and a cherry on top.
In this example, we have drawn an arrow pointing to the bunting graphic to highlight that it is decorative.
Decorative images don’t convey meaning or add real value to someone’s understanding of the content on a page, like the other images on the page do. In the example above, the photograph of the sundae helps to illustrate what an ice cream sundae is for those who don’t know. If this were a restaurant website, the sundae might help customers know what to expect if ordering the sundae off the menu or seeing the image might aid in their purchase decision. In this way, the photograph adds value to the page that the bunting image does not.
If the two images, above, were on your website, you would want to enter alt text for the sundae photograph but not for the bunting image and would want to ensure that the bunting image has an empty alt tag present.
If you’re not sure if your image is decorative and needs alt text or not, you may find this alt decision tree helpful.
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.
How to Fix or Resolve Image Empty Alternative Text Warnings
What to do (in short)
To fix or resolve an Image Empty Alternative Text warning, you need to determine if the image is decorative or if it adds something meaningful to the page.
If it is not decorative, you need to add appropriate alternative text to describe the image’s purpose. If the image is decorative, you would leave the alternative text blank and “Ignore” the warning.
How to find images with empty alt text on your WordPress post or page
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have an Image Empty Alternative text warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the applicable warning to see a list of images (in code) that caused the warning to be flagged.
Fixing empty alternative text
This screenshot shows two examples of images with empty alternative text that have been flagged in Accessibility Checker.
If you were editing this page, and they were in the content area, you could scroll up to the block editor and find the images to fix. If you are using an alternate builder or the images are in your header, footer, or sidebar, then you can use the “View on page” link to find the images on the front of your website.
Clicking “View on page” will open the front-end highlighting feature of Accessibility Checker, which will show you the image on the front of the website with a dotted pink line around it.
Generally, if the image is added to a post or page with an image block in the Gutenberg block editor or with the “Add Media” button you can simply click on the image to add alt text within the editor. Alternative text is added in the block settings on the right in the WordPress block editor.
Adding alternative text in the media library vs in a post or page editor
There are two ways to add alternative text to your images in WordPress. You can add them to images within the media library or can add them directly in the post or page where they are embedded, as shown in the image in the preceding “Fixing empty alternative text” section.
Add contextual alt text on your page/post edit screen
If you add alt text within a post or page edit screen, that alternative text will not be saved in the media library and will only be visible on that particular post or page. If you insert the image again on a different page, you will need to add alt text to the image again on the second page where it is being used. The reason for this is that good alternative text is supposed to be contextual and provide meaning to enhance the content on the page. In that way, the same image used on multiple pages may not always have the same alternative text.
Here is an example of an image that might have different alternative text depending upon the context on the page:
If you were to use this photograph on your business’ about page alongside text that describes your business’ location, you might write alt text like:
Sunny day on First Street with XYZ Co. building on the left and city skyscrapers in the background.
In this usage, you would have alt text that helps blind or visually impaired customers to picture your company’s location, mentioning that it’s in an urban environment by noting the presence of skyscrapers. You might mention that it’s a sunny day to help frame the photograph in a positive light. There would be no need to mention that no people or cars are present in the photograph.
In contrast, you could use this same image on a post about COVID-19’s impact on businesses and would want to convey the empty nature of the city. You also might be less apt to discuss the sunlight or anything that would frame the nature of the photograph in a more positive light. In this case, the alt text might be:
Eerily empty buildings, sidewalks, and streets as downtown businesses lockdown.
Notice that the alternative text for this same image can be dramatically different depending on how it is being used. For this reason, it is preferable to write the alternative text for your image on the page(s) where they are being used so that you can ensure that the alt text is meaningful within the other content on the page.
WebAIM has additional examples about context within alt text.
Add missing alt text to many images quickly in the Media Library
If you have many images with empty alternative text tags, the fastest way to add alternative text to your images quickly is to add the text within the WordPress Media Library.
We have audited websites where no one was thinking about accessibility or search engine optimization, and there are literally thousands of images on the site without alternative text. If your website has many, many images that are missing alternative text, then the fastest way to add alternative text to all of your images quickly is to add the text in the attachment details popup that appears after clicking on an image thumbnail in the media library.
As shown above, when viewing the attachment details, you can add type alternative text in a box to the right of the image, then you can use the left and right arrows at the top right of the popup to move to the next image. This will allow you to add alternative text to a large number of images as quickly as possible.
Alt text added here should be more general than contextual since you may not know how the image is being used on the website, but it should accurately describe the contents of the photograph or graphic.
If the image is used as a featured image for a blog post or page or you’re using a custom theme or plugin that pulls the alt text from the media library, this will fix your Image Empty Alternative text warnings. However, it’s important to note that editing alt text in the media library will not automatically add it to all places where that image has been inserted into a post or page.
If you have an image added to the content area of a page or post, you will need to edit that page or post and add the alt text directly.
How to write good alternative text
In addition to providing contextual information about the image as it relates to the content on the page, here are some other guidelines for ensuring that your alternative text is useful:
- Do not include phrases like “image of” or “photo of” – screen readers will announce that it is an image without you writing that.
- Do not use the alt attribute as a place to stuff keywords purely intended for search engine optimization. Make sure your alt text accurately describes with is in the image.
- Do not write overly long alt text that is more than a few words or a short sentence. Anything more than 100 characters will flag a long alt text error.
- Do not repeat information contained in a caption or nearby text.
Visit our Low-Quality Alternative Text article for more tips on writing meaningful alt text.
