Decorative images and empty alt

Updated October 23, 2026. An 8 minute read.

Fig. 1A page where a wavy divider is only decoration and one picture carries content

Scroll sideways to see every column.

One decorative image, six ways to code it, and what a screen reader does with each
The code	What happens	Verdict
<img src="wave.png" alt="">	Screen readers skip it.	WorksW3C's way to mark a decorative image (technique H67)
<img src="wave.png">	Some screen readers read the file name instead.	FailW3C failure F38
<img src="wave.png" alt=" ">	Some screen readers still announce an image.	FixW3C images tutorial, tips
<img src="wave.png" alt="decorative wave">	The words are read out every time.	FailW3C failure F39
<img src="wave.png" alt="" title="Wave">	W3C's technique for an ignored image asks for no title as well.	FixW3C technique H67
.hero { background-image: url(wave.png); }	Not in the page's content at all.	WorksW3C technique C9, decoration only

What counts as a decorative image

W3C's images tutorial puts it in one line: decorative images don't add information to the content of a page. Either the text beside them already gives that information, or they are there to make the page look better. For those, the right alt text is none at all: alt="", so a screen reader passes over them instead of filling the listener's ears with clutter.

What WCAG asks: 1.1.1 Non-text Content, Level A

Decoration, Formatting, Invisible If non-text content 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.
WCAG defines pure decoration as "serving only an aesthetic purpose, providing no information, and having no functionality".

W3C lists four kinds of image that may be decorative:

Page styling: borders, spacers, corners, dividers, textures.
A picture beside link text: an icon that makes a link easier to spot or bigger to click, when the link's words already say where it goes.
Eye-candy: a photo that sets a mood but carries no information.
A picture the text already describes: the caption or paragraph next to it says everything it shows.

W3C also says the call is the author's, made on why the image is on the page, and the same picture can go either way. Its own example is a photo of a guide dog wearing a bell. Beside a paragraph that never says how the bell is worn, the photo is informative; if the paragraph described the bell on its collar, the photo would be decorative. A stock photo of a smiling family is decorative if it only fills space, and informative, with the alt "We're family-friendly", if giving that impression is the reason you chose it.

Takeaway

Read the page aloud as if over the phone, W3C's own test. If you would skip the picture without the listener missing anything, it is decorative. If you would say something, that something is its alt text, and our alt text examples show how to write it.

Line drawing of a dotted ornamental border around a picture of hills, the picture's sun ringed in orange — Fig. 2An ornamental border says nothing while the picture inside it does the work

Decorative, informative or functional? Four questions

The helper below asks the questions in the order of W3C's alt decision tree. The order matters: an image that is the only thing in a link is never decorative, however pretty, and words inside a picture count as content unless the same words are on the page as real text. It uses the same role names as our alt text check.

1. Is the image inside a link or button that would be unclear without it?

A logo alone in a link home, a search icon, a product photo with no text in its link.

YesNo

Answer the question above to see the role.

How to mark a decorative image

An img element: alt="", nothing between the quotes

The alt attribute must be there and must be empty. Leaving it out is not the same thing: with no alt at all, some screen readers read the file name instead, which W3C counts as a failure. A space between the quotes is not empty either.

WorksEmpty alt, no title

<img src="wave.png" alt="">

FailsNo alt attribute

<img src="wave.png">

role="presentation" and aria-hidden

W3C's tutorial mentions role="presentation" as another way to hide an image, and notes it is not as widely supported as an empty alt. W3C's rules for ARIA in HTML add that an img with alt="" already counts as presentation, so writing the role on top is not recommended. The one extra attribute allowed there is aria-hidden="true", which you do not need on an img with empty alt. Start and stop with alt="".

aria-hidden earns its place on things that are not img elements: an inline SVG icon or an icon font glyph beside a word that already says the same thing. The ARIA standard allows hiding visible content only when it is redundant or extraneous, so never put it on anything a person can click or anything that carries the only copy of some information.

WorksAn inline SVG icon beside its own word

<a href="/contact">
  <svg aria-hidden="true" focusable="false">…</svg>
  Contact us
</a>

You have passed one on this page already. The small orange ring just above the opening table is an inline SVG inside a wrapper marked aria-hidden="true": it is the site's divider, it says nothing, and a screen reader never meets it. The logo mark in our menu bar is hidden the same way, because the link's own text already reads "Altstamp".

CSS background images

W3C's preferred home for pure decoration is CSS: a background image, a ::before or ::after picture, a list bullet image. None of them enter the page's content, so there is nothing to hide, and W3C notes that some browsers drop them when a visitor turns styles off, so they never get in the way of large text or high-contrast settings. The catch runs the other way: CSS backgrounds cannot carry alt text, so W3C counts it as a failure to put information there. A hero banner whose sale price lives only in a background picture says nothing to a screen reader.

WorksDecoration in CSS

.page-header { background-image: url("waves.svg"); }

In WordPress, Shopify and other editors

WordPress

WordPress's own guide to the Image block, updated in August 2026, describes a "Mark as decorative" option beside the alternative text field in the block's settings, for images that add no meaningful information or function. The same guide says the alt text in the Media Library is only the default: alt text set in the block applies to that one page. So an image can be decorative in one post and informative in another, which is exactly how W3C says it should work. If your WordPress does not show the option yet, leaving the block's alt field empty is the older route the same guide still describes. Plugins that check this for you are in our WordPress accessibility plugins comparison.

Shopify

Shopify's help page for product media describes one alt text field per image and no decorative switch. Shopify's guidance for theme developers asks themes to give decorative images an empty alt, so what a blank field turns into on your storefront depends on how your theme is coded. Check the page itself, as below. Product photos are rarely decorative anyway; our guide to making a Shopify store accessible covers the rest of the store.

Any other editor

Look in the image settings for a decorative checkbox or switch. If there is none, an empty alt field is the usual route, but what a blank field turns into varies from one builder to the next. Do not trust the settings panel: check the HTML the visitor gets.

Check the HTML in ten seconds

Right-click the image on your live page and choose Inspect. In the code that opens, the img line should read alt="" with nothing between the quotes. If it shows a file name, a title or no alt at all, the editor did not do what its setting promised.

Common mistakes with decorative images

Marking an informative image decorative

The most costly slip, because nothing flags it: the code is valid and no automated checker can tell. A sale banner whose dates are only in the picture, a photo of the menu board, a chart whose numbers appear nowhere else, each marked decorative to make a warning go away. The listener simply never learns the sale, the menu or the numbers exist. If the page's text would have to change to make the image skippable, it is not decorative.

Writing "spacer" or "decorative image" as the alt

An alt that announces the image is decorative is the opposite of hiding it. W3C names this exact case as a failure of 1.1.1 (its example is alt="spacer"), and lists placeholder words such as "image" and "picture" in another. "Divider", "background", "banner" and "decorative flourish" fail the same way: they are read out and say nothing.

Empty alt on an image that is the only thing in a link

A linked logo or product photo with alt="" and no other text leaves the link with no name. W3C notes that screen readers then tend to read the file name, the image address or the link's address. It is common: WebAIM's 2026 scan of the top million home pages found that 45% of the images missing alt text were linked images. Empty is only right when the link's own text already names it; see a photo inside a link with text.

Moving information into a CSS background to dodge the alt

Swapping an img for a background image does remove the scanner warning, and W3C counts it as a failure when the picture carries information: a background image cannot have a text alternative. Background images are for decoration only.

Check your own pages

List the images on one page and sort them with the four questions above. Most small-business pages have one or two decorative images and a handful that carry information.
For each decorative one, inspect the HTML for alt="" with nothing between the quotes, and no title. For anything in CSS, ask whether the page would lose information if it vanished.
Paste any alt you are unsure of into our alt text check with the role set to Decorative: it fails words in a decorative alt and flags a space between the quotes.
Listen once. A screen reader should pass over every decorative image in silence; our screen reader testing guide shows how to try it with a free one in ten minutes.

Quick reference

Decorative img: alt="", no space, no title, no role needed.
Inline SVG or icon font beside its own word: aria-hidden="true".
Pure decoration you control in code: a CSS background.
The only thing in a link or button: never empty; name where it goes.
Words, data or an impression you meant to give: not decorative.

Images are the first line of the WCAG 2.2 AA checklist (1.1.1, Level A). The same decorative rule applies inside documents and newsletters: see how to make a PDF accessible and accessible email.