Did an “Image Long 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 Image Long 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.
What does the Image Long Alternative Text warning mean?
If a post or page on your website has an Image Long Alternative Text warning, that means that one or more of the images on the page has alt text that may be too long for a screen reader to read or that could be overly verbose to the point of being annoying to users of assistive technology.
How does Accessibility Checker test for long alternative text?
While auditing your page or post content, Accessibility Checker will identify all images on the page and check to see if they have alternative text. If alt text is present Accessibility Checker counts the number of characters in the alternative text. An Image Long Alternative Text warning will be flagged if there are more than 100 characters in your alternative text.
Impact on Accessibility
Why is alternative text length important?
Alternative text is mostly used by people with screen readers. If you have alternative text that is longer than 125 or 150 characters, some screen readers will cut off and stop reading past that character count. This would result in a screen reader user not receiving all of the information you are trying to convey about the image.
Additionally, alternative text is meant to be descriptive of the image but in a succinct manner, without being too wordy. If you present too much information in an image’s alt text, you may distract the user from the purpose of the image within the context of the page or frustrate them because the alternative text takes too long for their screen reader to read.
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 the Image Long Alternative Text Warning
What to do (in short)
To fix this warning, you need to shorten your alt text for any images that have been flagged with an Image Long Alternative Text warning. Your alternative text should be 100 characters or less.
How to find long 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 Long Alternative Text warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Long Alternative Text warning to see a list of code that caused the warning to be flagged.
In the screenshot above, there is one image that has been flagged under the Image Long Alternative Text warning. The line of code is:
<img src="https://demosite.equalizedigital.com/wp-content/themes/coaching-plus/config/import/images/home-client-image.png" alt="I will help you reach your health goals by creating a custom plan just for you. Each plan is color-coordinated and compiled after an in-depth meeting with you. Typically, my custom plans include easy healthy recipes, exercise tips, and tidbits for keeping a positive mental space. Plans vary in detail, based upon your goals, your time constraints, and the level of coaching that we decide is best for you. Together, we will put habits in place that you can maintain long after your coaching sessions end." class="wp-image-55"/>In this example, the warning is being flagged because the image has an alt attribute with 505 characters. If this were your website, you would want to modify the alt text so that it is no more than 100 characters.
Tips for writing quality alt text
When shortening the alternative text to an appropriate length, keep in mind these recommendations for writing good alt text:
- Alt text is not intended to be a paragraph – it should be a short sentence or phrase only.
- Punctuation and even capitalization is not necessary with rare exceptions for apostrophes or occasional commas.
- It is not necessary to describe every detail of a photo – share the information that is relevant within the context of the page.
- Do not include the phrases “image of…” or “graphic of” as the screen reader will announce that it is an image.
- If there is text in the image, the alt text should contain the text unless there is so much text that the alt is too long. In that case, you should include the text that is on the image elsewhere on the page (though we recommend not including images with text at all).
Visit our Low-Quality Alternative Text tooltip page for more tips on writing meaningful, appropriate-length alt text.
