image-alt

Verify that <img> elements contain alternate text or have a role of either none or presentation.

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 information has a meaningful alternative text with a role of either "none" or "presentation". Decorative elements should have empty alt attributes (alt=""). Use alt attributes, aria-label, or aria-labelledby for alternative text.

References

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