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.

With this rule, BrowserStack AI helps you identify decorative images on your web pages.

Examples

The following example includes an alt text for a purely decorative image (an icon for Accessibility Testing), causing screen readers to read it aloud. If such a case exists in your web page, BrowserStack AI identifies it and suggests you to fix it.

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?

The first step to fix violations of decorative-image rule is to identify whether the images in your website are decorative or not.

You can detect decorative images by checking if the meaning of the conveyed information changes or if any information is lost if the image doesn’t exist. For instance, consider an image decorative if it only increases a link’s or button’s clickable area.

Refer to this Web Accessibility Initiative tutorial for more guidance on decorative images.

After identifying decorative images, use one of the following methods to mark it as decorative:

• 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.
• Remove the <title> attribute or keep it empty.
• In case of an svg, remove the <title> tag inside the svg, if it exists. Remove role="img" and add role="presentation".

References

• WCAG 1.1.1: Non-text Content
• WCAG 4.1.2: Name, Role, Value
• W3C Guidance on Decorative Images