Did a “Low-quality 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.
About the Low-quality Alternative Text Warning
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 how to edit the alternative text on your images or for more information on how alt text is added within WordPress, reference our Image Missing or Empty Alternative Text error page.
What qualifies as ‘low-quality’ alternative text?
Low-quality alternative text is text that does not accurately describe the image or which includes extraneous and unnecessary words and phrases that may be annoying or bothersome to people using assistive technology like screen readers.
Good alternative text should accurately describe what is shown in the photograph or graphic and provide meaningful value within the context of the page. Accessibility Checker has a number of items that it looks for as potential signs that the alternative text may be low-quality or not useful; these tests are described in the following section.
How does Accessibility Checker test for low-quality alternative text?
While auditing your page or post content, Accessibility Checker will identify all images (<img>) and check to see if they have an alt attribute. If an alt attribute is present and does not contain only spaces, Accessibility Checker looks for the following to create a preliminary assessment of the alt text’s quality:
- if the text begins with “graphic of,” “bullet,” or “image of”;
- if the text ends with “image” or “graphic”;
- if an image extension is contained in the alt text, specifically .apng, .bmp, .gif, .ico, .cur, .jpg, .jpeg, .jfif, .pjpeg, .pjp, .png, .svg, .tif, .tiff, or .webp; and
- if the text contains one of these keywords or phrases anywhere within the string: graphic of, bullet, image of, image, graphic, photo, photograph, drawing, painting, artwork, logo, bullet, button, arrow, more, spacer, blank, chart, table, diagram, graph, or the * character.
If any of the above are present, then a Low-quality Alternative Text warning will be flagged. Accessibility Checker will ignore 1-pixel and spacer images (such as ad tracking pixels) and images within a valid caption.
Limitations of Accessibility Checker’s image alt text quality test
As described above, Accessibility Checker looks for a number of likely keywords or phrases that could be a sign that the alternative text provided for an image is not high quality and needs to be fixed. It is important to note that, even if none of your images are flagged with a low-quality warning, they may still have low-quality alternative text that is stopping people from fully engaging with your website.
Here is an example screenshot from a popular clothing retailer’s website:
The dresses shown in this example have relatively similar names, though they are different in appearance. Two of the dresses are called “Waist-Defined Slub-Knit Midi T-Shirt Dress;” they have the same cut but one is black and the other is red and white striped. The third dress is called “Cozy Plush-Knit Waist-Defined Midi Dress” and is very similar to the first dress (both are black and similar cuts) though the third dress has long sleeves and the first dress does not.
The alt text for these images on this retailer’s website merely repeats the name of the product. This is problematic both because duplicate alternative text is annoying to users and also because, more importantly, a blind shopper cannot know what sighted users can see at a glance: the color/pattern and sleeve length of the dresses differ. Not having full information about how these dresses differ would make it challenging for a blind shopper to choose and purchase the dress she wants. This is the perfect example of low-quality alt text that will cause problems for users with certain types of disabilities but that Accessibility Checker will not flag.
Unfortunately, there is no way that Accessibility Checker or any other automated accessibility scanner can view images and fully check to make sure that the alternative text truly represents what is in the image and that it makes sense within the context of the page. Only a human can make that judgment, so it is important that when you manually test your website for accessibility you also manually review the quality of your alt text for every image.
Impact on Accessibility
Why is high-quality alternative text important?
Alternative text, when correctly added to an image, conveys meaning about what that image is about to people who cannot see it. In order to convey meaning and improve the user experience on the site, alternative text should be an accurate description of the image that makes sense in the context of the page.
Low-quality alternative text can cause confusion or misunderstanding for users in these cases. As discussed in the example above with the dresses, poor alternative text can stop blind and visually impaired users from finding information on your site or even cost your business a sale if the information they need to make a purchase is not present.
Including quality alternative text allows users to understand the content that is being presented, and understand all the aspects of your website regardless of visual ability.
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.
How to Resolve a Low-Quality Alternative Text Warning
What to do (in short)
To fix this warning, you will need to rewrite the alternative text for any images that flagged the Low-Quality Alternative Text warning, ensuring the alternative text is accurate, unique, contextually appropriate, and does not contain redundant or unnecessary descriptors.
How to find and fix low-quality alt text on your WordPress posts or pages
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have a Low-quality Alternative Text warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Low-quality Alternative Text warning to see a list of code that caused the warning to be flagged.
In the screenshot above, there is one code example that has been flagged under the Low-quality Alternative Text warning. This line of code is:
<img src="https://demosite.equalizedigital.com/wp-content/themes/coaching-plus/config/import/images/home-client-image.png" alt="image of me smiling in a pink dress" class="wp-image-105"/>In this example, the warning is being flagged because the image has an alt attribute of “image of me smiling in a pink dress”. It is unnecessary to include the phrase “image of” because most screen readers will announce that it is an image, which would mean that users would hear “Image. Image of me smiling in a pink dress.” This is redundant and delays screen reader users from getting to the important information about the photo.
If an image is conveying information, your alt text should describe only that information. In almost all cases, is not necessary for a user to know that it is a specific kind of image that displays the information (I.e., whether it is a photograph or an illustration).
Simply removing the phrase “image of” would make the Low-quality Alternative Text warning disappear, however there are additional ways that this alt text could be improved, discussed in the following section.
How to write meaningful alt text
To write alt text that is informative and concise, consider how you would describe the image to someone who cannot see it. Try to think of all the important elements of the image that are necessary to fully understand what it is conveying, and how you can write that in a reasonable amount of words.
Good alt text for portraits
In the example above, the alternative text “image of me smiling in a pink dress” applies to the photo shown on the right side of this website screenshot:
If this were your website, to improve this alt text, you would first remove the phrase “image of” which is unnecessary information. Next, you would change “me” to “Madi.” Screen reader users will not know who “me” is referring to, so that doesn’t really help them understand the image.
Instead of “image of me smiling in a pink dress”, the alternative text could read: “Madi smiling in a pink dress”. This explains who is in the photo, what she is doing, and what she is wearing.
Another way to approach the alternative text for this image is to think about why this particular image was selected for this section. This section introduces Madi to her audience and provides context about what users can expect on the web page, mentioning recipes, exercise routines, and mental health tips. The image is relatively casual in contrast to the corporate headshots you might see on a business’ team page – that is likely an important detail.
When describing an image to a blind or visually impaired person, you want to ask questions about what the image is trying to convey. What are your goals in including the image? For this photo we might consider:
- Was this photo selected to make Madi seem more approachable to her audience? If so, we might include the word casual or mention that she is brushing back her hair.
- Is it important that people know she is young? If so, we might include her age.
- In order to decide to work with her, do prospective clients need to know that in appearance she practices what she preaches? If so, including the words fit or trim or healthy might be appropriate.
Good alt text for products
As mentioned above, it’s important to have clear details in alternative text for any product images. Think about what needs to be included that will provide blind and visually impaired users important details about the product so they will understand enough about what the product looks like to want to read more about the product on its product page and/or add it to their cart to purchase.
The product name is almost never appropriate alt text for a product image. Here is another example of a product photo and how it might be described in alternative text.
It would be accurate to have alternative text that describes this image as “three wooden toys on books” but that is probably not the best alt text to entice your customers to want to learn more, especially if there are other sets of three wooden toys in your store. You might also be tempted to reference “hand-carved toys,” but if all of your toys are hand-carved, that may not be unique enough to describe this particular photo.
Things to consider for product photos:
- What makes this particular product image unique relative to other products in your store?
- What is different about this photo from other photos of this specific toy set (from other angles or in different settings)?
- What are the goals of people who might search for this product and/or the feelings they might have while looking for it?
- Does the background and books the products are standing on matter because they set a tone or convey important information or can they be left out?
- How close will the image be in reference to the product name? (I.e., it may be redundant to include “wooden toys” in the alt text because that is already conveyed by the nearby title of the product.)
With all of those things in mind, you might determine that the best alternative text for this image is something like “hand-carved, all-natural painted giraffe, alligator, and elephant for preschoolers.”
Don’t include information in alt text that sighted users need
When writing alt text, it’s important to remember that alt text is primarily visible to blind and visually impaired screen reader users. Alt text is only visible to sighted users if an image fails to load for one reason or another – something you hope will never happen on your website!
For that reason it is important to not include any information that sighted users should have in the alt text. Rather than being included in alt text, information like photo credits or copyright information should be put in a caption. This will ensure the information is available to all users regardless of ability.
Note: photo credits added to photos in the form of a watermark are not accessible to people using assistive technology and as such these credits should also be included in a caption in addition to the watermark.
Alt text for complex images and graphics
Alt text is generally limited to 125-150 characters and is intended to be succinct. Accessibility Checker will flag a long alternative text warning if your alt text is over 100 characters.
If you have a complex image such as an infographic, chart, or graph, you likely cannot provide an adequate description of everything in the graphic within alt text. In this instance there are a couple of options for making sure that the complex image is accessible:
- Provide a clear text summary describing the graphic and/or a properly coded data table nearby and use the alt text to point people to that description or data table. Example alt text: “Bar chart comparing men vs. women in state populations. See table below for data.”
- Use the longdesc attribute to link to a different URL or file that fully describes the image or graphic. Screen reader users will be able to follow the link to read a longer paragraph style description of the image.
Either of these options will allow blind and visually impaired users to fully understand the complex graphic, though there are some pros and cons to each option.
Advantages of long description attributes include:
- Long descriptions can be easily reused for multiple instances of the same image across different pages without repeating a block of text throughout your website.
- Linking to a long description reduces the possible visual clutter on the original web page where the graphic appears.
- Long description attributes make it easier for users of assistive technology to quickly jump to the description rather than having to “find it below.”
Advantages to having the additional information on the same page include:
- There are some screen readers which have limited support for the longdesc attribute.
- Having the description and/or data table on the same page benefits all users, whereas the presence of a long description is only apparent to screen reader users.
- Adding additional text content in the form of the description or a data table to the page with the complex image or graphic will likely help to improve the search engine ranking of that page.
Generally our recommendation is to include the additional information on the same page as the image, but you’ll need to determine what the best solution is for your particular website and image.
WebAIM has additional information about writing good alt text for complex/advanced images that you may find helpful.
