inappropriate-alt-complex

Description

Complex images, such as graphs, charts, and infographics, must include both short and long alternative texts. The short alt text provides a brief summary, while the long alt text conveys detailed information for users who rely on screen readers.

Users with visual impairments depend on screen readers to interpret images. Complex images contain a lot of critical information. Without meaningful alt texts, the users may miss this information. A short alt text gives a quick summary, while a long description offers in-depth details, ensuring equal access to information.

Examples

The following example includes meaningful short alt text but does not have a long alt text. As a result, users who rely on screen readers may not be able to understand the detailed information in the chart.

The following corrected example includes both a short alt text and a long alt text. This ensure the information in the chart is accessible to all users.

How to fix?

• Add a short alt text that meaningfully summarizes the image.
• Add a long alt text that provides a detailed description of the image
• Use one of the following methods to add the long alt text:
  • Use the aria-describedby property and an element that contains the long alt text.
  • Add a short alt text and a link to the long alternative text immediately next to the image.
  • Add a short alt text and a reference to where the long alternative exists on the page.

References

• WCAG 1.1.1: Non-text Content