When is an image decorative? When it looks good but says nothing

Images can greatly enhance the visual appeal and usability of a website—but not all images need to be announced by a screen reader. In accessibility terms, images fall into two broad categories: informative and decorative.

Informative images convey meaning not otherwise available through text. They play an essential role in understanding or navigating content.

Decorative images, on the other hand, serve purely aesthetic purposes or reinforce information already present. For users of screen readers and other assistive technologies, these images should be hidden to reduce cognitive noise and keep the experience streamlined.

So how do you decide which is which? Let’s break it down.

Show and tell: criteria for informative images

An image is informative if:

It presents new content: The image conveys a concept, detail, or piece of data not fully explained by nearby text.
It supports task completion: The image is needed to understand how to use a feature, follow a process, or complete an action.
It contains unique visual details: Appearance, color, emotion, or other details important to understanding or decision-making are only visible in the image.
It includes essential text: Words in the image (e.g., a promo banner that says “20% Off”) aren’t repeated elsewhere in the surrounding content.
It is functional: The image serves as a link, button, or control. If clicking the image performs an action or takes you somewhere, it needs alt text describing the function.

If removing the image would impair comprehension, hide data, or prevent task completion, it’s informative.

Just here for the vibes: criteria for decorative images

An image is decorative if:

It adds no new information: Everything the image shows is already explained by surrounding text.
It serves a visual design purpose: Used as a background, spacer, border, icon, or ornamentation.
It’s redundant with adjacent content: For example, an image of a product right next to a link that says the product name and leads to the product detail page.
It’s described by a caption or label: If the image’s meaning is fully captured by accompanying text.
It sets a tone or ambiance only: A stock photo, abstract visual, or illustration that contributes mood but not content.

If removing the image has no effect on meaning, structure, or usability—it’s decorative.

Check out the W3C’s tutorial on decorative images for more details.

Context is everything: considerations for specific website domains

Different websites use images in different ways. What counts as decorative on one site might be essential on another. Here’s how the line between informative and decorative images often plays out across some popular categories of website.

E-Commerce

Informative: Product photos, color variants, detail zooms, any images showing text/logos on products.
Decorative: Logos shown with brand names already in text, redundant thumbnails, background visuals.

Education

Informative: Diagrams, process charts, maps, instructional photos, and infographics.
Decorative: Thematic stock images, school logos, or illustrations not referenced in learning content.

Blogs and Articles

Informative: Images tied to the story, referenced in text, or described in captions.
Decorative: Hero images, section break visuals, mood-setting stock photography not referenced.

When alt text backfires: problems with describing decorative images

When decorative images are given alt text, they introduce unnecessary and often confusing interruptions for screen reader users. Instead of focusing on meaningful content, users may hear redundant descriptions like “decorative border” or “smiling people stock photo” that add no value to their understanding of the page.

This added noise can:

Disrupt reading flow: Users are forced to listen to irrelevant content that distracts from the actual message.
Slow down navigation: Each extra image announcement increases the time it takes to browse or scan a page.
Cause cognitive overload: Especially for users with cognitive disabilities or screen reader beginners, processing unhelpful alt text can make pages harder to understand.

Ultimately, giving alt text to decorative images defeats the purpose of marking content for accessibility—it clutters the experience rather than clarifying it. That’s why it’s essential to explicitly flag images as decorative these cases.

The literal rule of thumb

Accessibility advocate Marco Salsiccia offers a helpful test to determine whether or not an image is decorative:

"If you cover an image with your thumb and no content or context is lost, it’s decorative."

A good test is to ask: If this image were missing, would users lose understanding or context? If yes, it’s informative. If not, it’s decorative.

The right way to hide it: how to flag an image as decorative

In HTML, mark decorative images with an empty alt attribute:

<img src="/images/border.png" alt="" />

This signals screen readers to skip the image.

Important:

Don’t omit the alt attribute—this can result in screen readers guessing and reading file names.
Background images styled with CSS are naturally decorative and skipped by screen readers.
In some cases, you can also use role="presentation" or aria-hidden="true", particularly for SVG or non-<img> content, but alt="" is the most broadly supported approach.

Platform limitations: who supports decorative image markup?

While most website builders and social media platforms support alt text, they often don’t offer a clear way to flag an image as decorative. Not all platforms output alt="" correctly, and some don’t support decorative image handling at all.

Platform	Supports Decorative Images?	Notes
WordPress (Block Editor)	✅ Yes	Offers an explicit option to mark images as decorative in the UI.
Squarespace	⚠️ Partial	Allows blank alt text, but may not output `alt=""`. Check the code.
Wix	❌ No	Requires alt text for all images in the editor.
Shopify	⚠️ Partial	Alt text required in admin UI; themes can override with `alt=""`.
Webflow	✅ Yes	Allows images to be marked decorative using empty alt text.
Weebly	⚠️ Partial	Can leave alt blank, but output is inconsistent.
Facebook	❌ No	Requires alt for image posts; automatic alt generated otherwise.
Instagram	❌ No	All images must include alt or rely on AI-generated descriptions.
LinkedIn	⚠️ Partial	Allows skipping alt, but no way to explicitly mark as decorative.
Twitter/X	❌ No	Alt text is optional, but no support for decorative flagging.

If you’re working in a platform with limited support for decorative images, here are a few work-arounds to consider:

Use CSS background-image for purely decorative visuals (screen readers typically ignore these)
Insert images with alt="" directly in code or templates
Use role="presentation" or aria-hidden="true" when alt="" isn’t an option
Override forced alt text with JavaScript or theme filters (if possible)
Use placeholder alt like decorative (but only as a last resort)
For social media, omit alt and describe content in the caption instead
Advocate for better accessibility support from platforms with feedback and support tickets

Conclusion

Using decorative images correctly ensures a smoother experience for screen reader users, reduces auditory clutter, and keeps your content focused and inclusive. When in doubt, remove the image from your layout and ask: Does the content on this page still work? If yes, mark it decorative and let it be silently stylish.