Did a “Duplicate 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 error, how it impacts your website’s accessibility, and how to fix it.
About the Duplicate 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?
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 open laptop on bed and looking happily at camera”.
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.
What does the Duplicate Alternative Text warning mean?
The Duplicate Alternative Text warning shows up in Accessibility Checker when the alternative text for an image on your WordPress post or page is identical to nearby or adjacent text, including the image’s title or caption. This warning also occurs if two images on the page have the same alternative text.
How does Accessibility Checker test for duplicate alternative text?
Accessibility Checker will run an audit of all the images on your post or page. It checks to see if each image has alternative text and then checks the following items:
- identical alt text on two different images on the same page,
- redundant alt text between the image title and alt,
- redundant alt text on an image that is a link anchor, and
- redundant alt text with the image caption.
If the alternative text for any of these items is the same or redundant, it will flag a Duplicant Alternative Text warning in Accessibility Checker’s list of accessibility errors and warnings.
Impact on Accessibility
What problems does duplicate alternative text cause?
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.
As such, alternative text should never repeat or should never be identical between two images on a post or page unless you are repeating the same image in multiple spots on a page.
If you have identical alt text on two different images, people who cannot see the images will think that they are the same. If they hear two different file names or titles this will be confusing for them. Duplicate alternative text is particularly problematic on linked images as users will assume that those links go to the same URL.
Why should the alt text and caption or title not be the same?
When an image has alternative text that is identical to the title or caption, a screen reader will read out the same phrase twice. This presents unnecessary information that may be confusing and is definitely repetitive. Hearing repetitive text over and over will slow down the user and present a distraction if they’re trying to find specific information on your website.
Ensuring that each image on your website has unique and appropriate alternative text is a step toward creating a website that all users will be able to understand and interact with.
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 Resolve a Duplicate Alternative Text Warning
What to do (in short)
To resolve this warning, you will need to change the text of either one or both elements that flagged the Duplicate Alternative Text warning, ensuring that all images have unique alt text and that you are not repeating your alt text in your image titles and captions.
How to find duplicate alt text on your WordPress post or page
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have a Duplicate Alternative Text warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Duplicate Alternative Text warning to see a list of code that caused the warning to be flagged.
In the screenshot above, there are two code examples that have been flagged under the Duplicate Alternative Text warning. These lines of code are:
<img src="http://badwebsite.flywheelsites.com/wp-content/themes/coaching-plus/config/import/images/home-client.png" alt="me with plant" class="wp-image-14"/>
<figure class="wp-block-image size-large"><img src="http://badwebsite.flywheelsites.com/wp-content/themes/coaching-plus/config/import/images/home-client.png" alt="me with plant" class="wp-image-14"/><figcaption>me with plant</figcaption></figure>In this example, the warning is being flagged because the image has an alt attribute of “me with plant” and also a caption with the same text.
If this were your website, you would want to either remove the caption from the image, remove the alt text, or modify one or both so that they are not repetitive and identical.
Visit our Low-Quality Alternative Text tooltip page for more tips on writing meaningful alt text.
