decorative-image

Description

Decorative images do not add meaningful content to a web page. They convey information that is already provided through other content. To prevent assistive technologies from announcing them unnecessarily, decorative images should be marked and hidden from assistive technologies.

Users with visual impairments rely on screen readers to navigate websites efficiently. If decorative images are not correctly marked, screen readers may announce them, adding unnecessary auditory clutter and disrupting the user experience.

Examples

The following example includes an alt text for a purely decorative image, causing screen readers to read it aloud.

In the following corrected example, the image is accurately marked as decorative by using an empty alt attribute, ensuring that screen readers ignore it.

How to fix?

To mark decorative images properly, use one of the following methods:

• Assign the null alt attribute (alt="") to purely decorative images.
• Use role="presentation" to indicate that the image should be ignored.
• Implement decorative images as CSS background images.

References

• WCAG 1.1.1: Non-text Content
• WCAG 4.1.2: Name, Role, Value