Decorative Image Handling

Decorative image handling ensures images that serve no informational purpose do not clutter the experience for screen reader users. Properly marking decorative images allows assistive technologies to skip them, keeping focus on meaningful content.

What Are Decorative Images

Decorative images provide visual interest without conveying information necessary for understanding the content. Examples include background patterns, visual separators, purely aesthetic photographs, and icons that repeat text labels.

The key distinction is whether removing the image would affect content comprehension. If the page remains equally understandable without the image, it is likely decorative. If removing the image leaves a gap in understanding, the image is informative and needs descriptive alt text.

WCAG Success Criterion 1.1.1 (Non-text Content) addresses decorative images by allowing them to be implemented so assistive technologies can ignore them. This prevents unnecessary announcements that slow navigation and distract users.

How to Handle Decorative Images

The primary method uses empty alt text: alt="". This explicitly tells assistive technologies that the image has no text alternative because none is needed. Screen readers skip images with empty alt, moving to the next content.

Importantly, empty alt (alt="") differs from missing alt. Missing the alt attribute entirely may cause screen readers to announce the filename or image path, which is worse than unhelpful. Always include the alt attribute; make it empty for decorative images.

CSS background images are inherently decorative from an accessibility perspective because screen readers do not access CSS backgrounds. Using background-image for decorative visuals keeps them out of the content layer entirely.

role=“presentation” or role=“none” can explicitly mark images as decorative, suppressing their semantics. However, empty alt is generally preferred for its simplicity and broad support.

For icon fonts or inline SVGs used decoratively, aria-hidden=“true” prevents announcement. This attribute explicitly hides the element from assistive technologies while keeping it visually present.

Key Considerations

• Use alt="" (empty alt) for decorative img elements
• Never omit the alt attribute; always include it even when empty
• Consider using CSS backgrounds for purely decorative images
• Apply aria-hidden=“true” to decorative SVGs and icon fonts
• Evaluate each image in context: decoration in one context may be informative in another
• Document guidelines for determining decorative versus informative images
• Review design patterns to identify commonly mishandled decorative images

Common Questions

How can designers identify decorative images?

A useful test asks: “If this image were removed, would the user miss any information?” If the answer is no, the image is decorative. Additional questions: Does the adjacent text already convey what the image shows? Is the image purely aesthetic?

Common decorative images include hero section mood photography, repeated icons next to linked text, visual dividers between sections, and background patterns. Informative images include product photos, instructional diagrams, charts, and images referenced in the text.

When should CSS backgrounds versus img elements be used?

CSS backgrounds suit purely decorative images that have no content purpose. They simplify accessibility handling since CSS images are invisible to assistive technologies by nature.

Img elements suit images that might be informative in some contexts, even if currently decorative. They also better support responsive image techniques (srcset, picture element) for performance optimization. The choice depends on both accessibility and technical requirements.

What about decorative images in design system components?

Design systems should pre-classify image handling within components. A testimonial card with a decorative background pattern handles that image internally with empty alt or CSS background. The component API does not expose the decorative image.

Components that include configurable images should provide clear guidance: “Product image (informative, alt text required)” versus “Accent graphic (decorative, no alt text needed).” Component documentation prevents confusion about which images need descriptions.

Summary

Decorative image handling uses empty alt text, CSS backgrounds, or aria-hidden to prevent assistive technologies from announcing images that convey no information. Proper identification of decorative versus informative images ensures screen reader users experience streamlined, meaningful content navigation.