image-alt-ai

This AI-powered rule checks if non-decorative images are missing alternate text.

Description

Provide descriptive text for all images to communicate their purpose and meaning effectively to users of screen readers.

Why is it important?

Images require concise, descriptive alt text for screen readers to convey content effectively. Without suitable digital text alternatives, visual information becomes inaccessible for users with varying abilities, such as those with low vision or color-blindness. Providing accessible alternatives ensures screen readers can convert content into speech or braille, catering to different sensory modalities.

How to fix?

Make sure that each <img> element with a non-decorative image has a meaningful alternative text. Use appropriate alt text, which conveys the same information as that of the image. Use alt attributes, aria-label, or aria-labelledby for alternative text. If you find that the image is decorative, it should have an empty alt attribute (alt=""). A decorative image does not convey any important information, and should be ignored by assistive technologies.

Examples

In the following incorrect example, the <img> element lacks an alt attribute, making it inaccessible to screen readers.

The following corrected example includes a meaningful alt attribute, providing a text alternative for screen readers.

References

• WCAG 1.1.1: Non-text content
• Accessibility Insights: image-alt