Short text alternative is missing
alt-text-short-text-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.
Even when a long description is provided for a complex image like a chart or graph or infographic, the image's brief alternative text should describe the main purpose or content of the image and reference the location of the long description.
How to Fix
Fix this issue using 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>