Short and detailed text alternatives missing for complex image
alt-text-complex-missing
Rule
Complex images MUST be briefly described using alt text AND MUST have a more complete long description.
Background
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. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.
When a complex image - such as a chart or graph or infographic - cannot be described adequately in an alt attribute of approximately 250 characters or less, a longer description is required for screen reader users to understand all of the information presented visually. The alternative content can be presented within the page or on another, easily accessible, page.
How to Fix
Fix this issue by providing both a short text alternative on the image itself and a complete long description.
To provide a short text alternative for the image, use any of the following techniques:
- Use the alt attribute on the <img> element to provide a brief description of the image and a reference to the location of the long description.
<img src="chart.jpg" alt="Chart of sales results by quarter. Extended description is below the chart.">
- Use an aria-label and role="img" on an <svg> or <canvas> or other non semantic element.
<svg role="img" aria-label="Chart of sales results by quarter. Extended description is below the chart.">
<div role="img" aria-label="Map of Italy. Extended description is below."> <img src="map-portion-1.jpg" alt=""> <img src="map-portion-2.jpg" alt=""> <img src="map-portion-3.jpg" alt=""> </div>
Provide a complete long description using ONE of the following techniques:
- Provide the long description in the context of the page itself.
- Provide a button that expands a collapsed region that contains the long description.
- Provide a button to open a dialog that contains the long description.
- Provide a link to a long description on another page via a normal link text.