Did a “Long Description Invalid” error 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 Long Description Invalid Error
What is a long description?
A long description, or longdesc, is a textual representation that is used to describe complex images to screen reader users and is added to the image’s HTML tab as a URL that screen reader users can follow to access the description of the image.
Complex images contain a substantial amount of information. Typically, they are:
- Diagrams or illustrations that rely on the ability of the user to understand the information in the image.
- Graphs or charts, such as a flow chart, bar graph, or organizational chart.
- Maps that show locations or weather.
- Infographics, which combine large amounts of text with graphical representations and images artistically.
In these cases, a short sentence or phrase will not be enough to communicate the information blind or visually impaired users need to understand all of the information contained in the image or graphic.
The long description attribute was originally intended to be added to image tags in place of an alt attribute, and would points to a separate document or page with a longer textual description of the complex image. However, longdesc is not fully supported by HTML5, browsers, and all screen readers and thus should be avoided.
What does the Long Description Invalid error mean?
The Long Description Invalid error means that one or more of the long descriptions on your website does not have an appropriate URL, filename, or file extension. It may also mean that the long description is not a URL, or it has been left blank.
Despite the lack of support and our recommendation against using longdesc, Accessibility Checker tests for invalid longdesc attributes just in case they are present. This will ensure the best experience for users of older screen readers that do support long descriptions.
How does Accessibility Checker test for invalid long descriptions?
While auditing your page or post content, Accessibility Checker will identify all images and look for longdesc attributes within the image tag. If the contents of the longdesc attribute is not a link to a valid web page (for example if it includes text or links to an image file), a Long Description Invalid Error will be flagged.
Impact on Accessibility
Are long descriptions important?
Despite the longdesc attribute not being recommended, providing “long descriptions” of complex images and graphics is very important. In order for your website to be fully accessible, you need to make sure that any complex images, graphics, and charts are understandable to people of all abilities, including those who are blind and visually impaired.
Providing longer descriptions and text alternatives for complex images can be helpful for all users, though, not just those who have screen readers. Long descriptions ensure that users who cannot understand the information in a visual chart, map, or other image have an alternative format available to aid in their understanding of the material presented.
The best way to denote that additional information is available for a complex image is to include a reference of where to find the information in the image’s alt text or in a caption. Get more information about alt text for complex 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.
How to Fix a Long Description Invalid Error
What to do (in short)
To fix this error, you will need to correct the longdesc attribute on your image and ensure that it links to the correct URL and does not include a link to an image file extension (such as .jpg, .png, .gif, etc.).
We highly recommend removing the longdesc attribute completely from your image and, instead, providing your description of the image on the page where the image is embedded.
How to find invalid long descriptions on your WordPress post or page
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have a Long Description Invalid error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Long Description Invalid error to see the code that caused it to be flagged.
In this example, the long description is invalid because it contains paragraph text instead of a URL:
<img src="/graph.png" alt="Most purchased fruits in the U.S." longdesc="This bar graph shows the most purchased fruits in the United States in 2019 according to The Packer's 2019 Fresh Trends survey. The chart lists fruits most purchased by respondents from most commonly purchased to least purchased, with a percentage of respondents saying they regularly buy the relevant fruit. The fruits and percentages are: Bananas - 69%; Apples - 69%; Strawberries - 62%; Grapes - 62%; Oranges - 54%. There are up and down arrows on bars indicating if this was a positive or negative change from 2018. Strawberries saw a positive change while grapes saw a negative change./>If this were your website, you would want to remove the string of text from the longdesc attribute and either replace with a URL that links to that paragraph (on the page below the image or on a different page).
Our recommendation is that you remove the longdesc altogether and make the description of the graph visible on the page for all users, either above or below the image.
