missing-long-alt

Description

Complex images, such as charts, diagrams, and infographics, must have a long alt text that is meaningful and accurately describes the purpose or content of the image. Without detailed and relevant descriptions, users who rely on screen readers to interpret images cannot understand complex images.

Users with visual impairments depend on screen readers to interpret images. Complex images often contain critical information that is inaccessible to such users. Simply providing a short alt text may not be sufficient to convey detailed information. In such cases, it is essential to include accurate and meaningful long alt text that clearly conveys all of the key information in the image. This ensures that accurate information is accessible to all users.

Examples

The following example uses only a short alt text that lacks details conveyed in a graph. If such cases exists in your web pages, BrowserStack AI highlights those cases for you to correct.

The following corrected example provides a long alt text that gives a detailed description of the information in the graph.

How to fix?

Ensure the short alternative text (i.e., the “alt” attribute value) contains a brief description of the image. Further, add long description of the image using any of the following methods:

• Use aria-describedby to provide the long alt text.
• Use <figcaption> within <figure> elements to provide the long alt text.
• Add a link adjacent to the image which directs to the long description.
• In the short alternative text of the image (the “alt” attribute), add a reference to where the long description exists in the web page.

References

• WCAG 1.1.1: Non-text Content