The short text alternative for the complex image is not appropriate or meaningful.
- Rule ID:
- User Impact:
Complex images MUST be briefly described using alt text AND MUST have a more complete long description.
The alternative text for informative images MUST be meaningful (accurately conveying the purpose of the image, and the author's intent).
People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative.
When the image is complex and requires a longer description, the alt text should indicate the purpose of the image, such as the title of a chart, and where to find an extended description of the image. Screen readers can then use the alternative text to convey that information to the screen reader user, who can find the extended description of the image.
Long description available on the page:
<img src="chart.jpg" alt="Sales results by quarter. Extended description is below the chart.">
<h4>Long description available by link:</h4> <pre><code><<span class="highlight">a href="longdescription.html"</span>><img src="chart.jpg" alt=<span class="highlight">Sales results by quarter. Follow link to extended description"</span>></a></code></pre> <h4>Other possible methods:</h4> <p>Long description available in a collapsed region, dialog, etc.</p>
Alt text summarizes image, but does not give location of long description:
<img src="chart.jpg" alt="Sales results by quarter. It was a good year!">
<h4>Alt text points to long description hidden using CSS:</h4> <pre><code><img src="chart.jpg" <span class="highlight">alt="Sales results by quarter. Extended description is below the chart."</span>>
<p class="hidden">The first quarter started slow….</p>
To fix this issue, do ALL of the following:
- Ensure that the short alternative text for the image gives a short, meaningful description of the main purpose or content of the image.
- Ensure that the short alternative text refers to the location of the long description.
- Provide a long description for the complex image in the HTML, a collapsed region, a button to a dialog, or a link to another page.
- Make the long description also available to sighted users.
Don't do this:
- Put a long description inside the alt attribute.
- Only make the long description available to screen reader users, such as by only providing a link in the longdesc attribute.
- Deque University: Complex Images
- W3C-WAI tutorial: Complex Images
- WCAG Understanding Document - 1.1.1: Non-text Content
- How to Meet WCAG: 1.1.1 Non-text Content