Decorative images and alt="": when empty is the right answer

Not every image needs a description. Some images exist only to look nice, and describing them makes a page worse for screen reader users because they have to sit through noise. For those images the correct alt text is empty: alt="".

But “empty” is easy to get wrong in both directions. Images that carry information get marked decorative, and decorative images get the alt attribute left out entirely, which is a different and worse thing. This guide covers how to tell the difference and how to check your site.

What WCAG actually says

WCAG Success Criterion 1.1.1 requires a text alternative for non-text content, with one important exception: if an image is “pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology” (W3C, Understanding SC 1.1.1).

So decorative images still have a requirement. They have to be hidden from assistive technology. In HTML, the standard way to do that is an empty alt attribute. W3C’s technique H67 is literally titled “Using null alt text and no title attribute on img elements for images that assistive technology should ignore” (W3C, Decorative Images tutorial).

Empty is not the same as missing

These two are different:

<img src="swirl.png" alt="">   <!-- empty: "skip me" -->
<img src="swirl.png">          <!-- missing: "I don't know" -->

When the alt attribute is missing, assistive technology has nothing to go on. W3C notes that “some screen readers will announce the file name of the image instead” (W3C), so the user may hear something like “swirl underscore final underscore v2 dot png”. A missing alt is always an error. An empty alt is a decision.

That’s why a checker should report them separately. “Missing alt” is a defect. “Empty alt” is fine if the image really is decorative, and only a human (or a careful reviewer) can confirm that.

Which images are decorative?

W3C lists four common cases where an image may be decorative (W3C):

1. Visual styling such as borders, spacers and corners.
2. Images supplementary to link text, used to make a link look nicer or bigger, where the link text already says everything.
3. Illustrative “eye-candy” that goes with adjacent text but doesn’t add information.
4. Images identified and described by surrounding text, for example a photo whose caption already says what it shows.

W3C also points out that “whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page” (same source). There is no list of image types that are always decorative. A photo of a beach can be ambience on a travel blog and essential information on a hotel’s “our private beach” page.

A practical test

Imagine the image fails to load and nothing appears in its place. Then ask:

• Would a reader miss any information? If no, it’s decorative: alt="".
• Would a link or button become unclear? If yes, it’s functional: describe the action (see our guide).
• Would they miss words? If yes, put the words in the alt.
• Would they miss facts, numbers or relationships? If yes, it’s informative or complex: describe it.

This is a condensed version of W3C’s alt decision tree.

Common decorative images (usually)

• Background textures, gradients, divider lines, flourishes.
• Stock photos used for mood at the top of blog posts, if the article never refers to them.
• Icons next to text that already says the same thing, like a phone icon beside “Call us: 020 7946 0000”.
• Thumbnails inside a link that also contains the article title as text (W3C’s example is a crocus picture inside a “Crocus bulbs” link).
• Team photos where the name and role appear right next to the photo, and the photo adds nothing beyond “this is what they look like”. This one is debatable. Many teams describe headshots briefly because some visitors genuinely want to know.

Common mistakes

Marking informative images as decorative. The most harmful error. Watch for:

• Product images. A product photo is almost never decorative on its product page.
• Infographics and charts. If the numbers aren’t also in text, the image carries content.
• Images of text. A banner reading “Closed on 25 December” is information.
• The only content of a link. If a linked image has alt="" and no text, the link has no name. WebAIM’s 2026 scan found that one in four linked images was missing alt text (WebAIM Million 2026).

Writing alt text for genuinely decorative images. “Decorative blue swoosh graphic” is clutter. So is a title attribute on a decorative image, which some assistive technology will read anyway. That’s why H67 says no title attribute.

Platforms that default to empty. Some platforms output alt="" when you haven’t filled the field in, which silently hides informative images. Shopify’s image_tag Liquid filter, for example, outputs the image’s alt text, and the documentation’s own example shows alt="" for an image with none set (Shopify Liquid docs). Squarespace says that if you don’t add alt text to an image block, “the image is hidden from assistive technologies, like screen readers” (Squarespace Help). In both cases an automated checker sees “empty alt, decorative, fine”, while a screen reader user misses a product photo. Empty alt on an image that looks informative is worth reviewing.

How to mark images decorative in common tools

• HTML: <img src="..." alt="">. Better still, use a CSS background image for purely decorative graphics. W3C says “where possible, decorative images should be provided using CSS background images instead”.
• WordPress (block editor): in the Image block settings you can “add meaningful alternative text to an image or mark it as decorative” (WordPress docs).
• Webflow: in the asset settings or image settings, choose Decorative (Webflow Help).
• Squarespace: section background images don’t support alt text, and Squarespace notes that decorative backgrounds generally don’t need it (Squarespace Help).
• ARIA: role="presentation" (or role="none") also hides an image, but W3C notes it’s “not as widely supported as using a null alt attribute”. Use alt="" first.

What about SVGs and icon fonts?

Inline SVG icons don’t have an alt attribute. For a decorative inline SVG, add aria-hidden="true" (and focusable="false" for older browsers). For a meaningful one, give it an accessible name, either with a <title> element plus role="img", or with an aria-label on the surrounding button or link. Icon fonts are similar: hide the glyph with aria-hidden="true" and put the meaning in visually hidden text if the icon stands alone.

How Altpass handles decorative images

When Altpass generates alt text, it looks at the image and at its surroundings: the page title, the nearest heading, whether the image is inside a link, and nearby text. When an image looks like pure styling, or is fully described by text next to it, Altpass suggests alt="" instead of inventing a description, and tells you why so you can confirm or overrule it. In the free checker, missing alt attributes are reported as errors, while empty alt on images that look informative is flagged for review.

Empty alt is a judgement call, and the final call is yours. The tool’s job is to point you at the cases worth a second look.

Check your pages

Run the free Altpass checker on a page. You’ll see which images have no alt attribute at all, which are empty, and which have weak text, so you can decide quickly which empty ones are genuinely decorative.

Updated 2026-10-07