Decorative image alt text: when to leave it empty

Decorative images add visual interest but no information. For them, the right alt text is no text at all: an alt attribute that is present and empty. This guide covers that one decision in depth, including how to tell decoration from content, what each way of hiding an image does, and the cases that go wrong most often. The wider rules are in our complete guide to alt text and the alt text examples.

The rule comes from WCAG 1.1.1 Non-text Content. Its last clause says that non-text content which is pure decoration, used only for visual formatting, or not presented to users must be implemented so that assistive technology can ignore it. The W3C explains the reasoning: alt text on such items "just distracts people using screen readers from the content on the page." Leaving the image unmarked has its own cost, because users are left guessing what they might have missed. Our WCAG 1.1.1 explainer covers the whole criterion.

Empty alt, missing alt and the other options

An image can be hidden from a screen reader in several ways, and they are not interchangeable. The first three rows below are markup on the img element itself.

The W3C tutorial treats a missing attribute as a different thing from an empty one: leaving alt out is "not an option" for a decorative image. Technique H67 puts the same point in one line, that a null alt "is not the same as having no alt attribute." H67 also asks for no title attribute on an image that should be ignored, so do not add one.

How to decide whether an image is decorative

The W3C tutorial lists four situations in which an image may be decorative. It is decorative when it is:

• visual styling, such as borders, spacers and corners;
• supplementary to link text, improving its appearance or enlarging the clickable area;
• illustrative of adjacent text without adding information (the tutorial calls it "eye-candy");
• already identified and described by the text around it.

The tutorial adds that only the author can decide, because the answer depends on why the image is on the page. WebAIM's alt text article gives two quick tests. Imagine deleting the image and ask whether anything important would be lost. Or ask what you would put in its place; if the answer is nothing, alt="" is probably enough. WebAIM's definition also includes a limit that matters later on this page: a decorative image has no function, so it is not a link.

Context changes the answer. The W3C's own example is an image added only for ambiance beside text about a tropical greenhouse, and it gets an empty alt. If the image's purpose were to identify a plant or convey other information, the tutorial says it should probably be treated as informative. The same logic applies to every row below. These are original examples with invented details.

Icons and linked images

An icon beside text

When an icon sits inside a link or button next to visible text that already names the action, the icon supplements the text. The W3C tutorial's example is a crocus bulb picture beside the link text "Crocus bulbs", with an empty alt on the picture. Without it, a screen reader announces the same thing twice.

<!-- Before: the icon and the text are both announced -->
<a href="/report/">
  <img src="arrow.svg" alt="right arrow">
  Read the full report
</a>

<!-- After: the link text names the destination -->
<a href="/report/">
  <img src="arrow.svg" alt="">
  Read the full report
</a>

An image that is the only content of a link

This is the case that breaks the "empty alt for decoration" habit. If a link contains only an image, the image supplies the link's name, so it cannot be empty. WCAG failure technique F89 covers it: a link whose only content is an image with no accessible name fails 2.4.4 Link Purpose, 2.4.9 and 4.1.2. In the technique's own example, an image with a null alt sits in one link beside a text link to the same page, and a screen reader falls back on guessing, and may read out the file name.

There are two fixes. If the image is alone in the link, give it an alt that names the destination or action. If a text link to the same place sits next to it, merge both into one link, which W3C technique H2 recommends. The image then supplements the text and can be empty.

<!-- Two links to one place; the first has no usable name -->
<a href="/scores/"><img src="football.gif" alt=""></a>
<a href="/scores/">Football scoreboard</a>

<!-- One link; the image is now decorative -->
<a href="/scores/">
  <img src="football.gif" alt="">
  Football scoreboard
</a>

Missing alt text on linked images is common. The WebAIM Million 2026 analysis found that 45% of the images with missing alternative text were linked images, "resulting in links that were not descriptive." Our link text checker finds vague link text, and the WCAG 2.4.4 explainer covers the criterion.

CSS backgrounds, role="presentation" and aria-hidden

Put true decoration in the stylesheet

The W3C tutorial says decorative images should, where possible, be provided as CSS background images instead of img elements. WebAIM gives the reason: a CSS image removes the need for alt text and takes the image out of the page's semantic and structural flow. For a divider, the markup is an empty element and the picture lives in the CSS:

.section-break {
  height: 48px;
  background: url("/img/wave.svg") center / contain no-repeat;
}

<div class="section-break"></div>

Two limits apply. A background image cannot carry alt text, so if it holds content, that content must also exist in the markup; WebAIM says so directly. And Google's image guidance states that it does not index CSS images, so an image you want found in image search is not decorative, and it belongs in a real img element with real alt text. Our guide to alt text and SEO has the detail. If the image marks a thematic break such as a change of topic, the W3C suggests an hr element, which tells assistive technology about the break.

role="presentation"

The W3C tutorial shows role="presentation" as a second way to hide a decorative image, with the caveat that it is not as widely supported as a null alt. Technique F38 accepts either. WAI-ARIA 1.2 adds two clarifications. The role removes an element's own role semantics and leaves its content in place, and it applies to elements that are not focusable. The specification notes that many people wrongly treat the role as a synonym for aria-hidden in general, because aria-hidden also hides descendants and the role does not. For an HTML img, though, it says the two are equivalent. That leaves alt="" as the simpler choice for images, because the W3C tutorial notes it has wider support. Our free scan treats an image with role="presentation", role="none" or aria-hidden="true" as deliberately hidden, so it does not report that image as missing alt text.

aria-hidden and inline SVG

An inline <svg> has no alt attribute, so decoration is hidden with aria-hidden="true". In WAI-ARIA 1.2, an aria-hidden element is hidden from the accessibility API, along with its descendants. The specification allows it, with caution, only to remove redundant or extraneous content, and it requires that the same meaning and function stay available some other way. The usual case is an icon beside visible text that already says the same thing.

<button type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"><path d="..." /></svg>
  Add to cart
</button>

Never put aria-hidden="true" on something a keyboard user can focus. The free scan has a dedicated check for it, rated serious; see what we check.

Both directions go wrong, and rule checks usually miss both

Decoration mistakes run in two opposite directions with opposite effects.

• Decoration narrated. A divider with alt="decorative gradient divider graphic" makes a screen reader read a sentence of noise on every page that uses it. The W3C's failure example is an image with alt="spacer". The text is accurate, which is exactly why a rule cannot object. Our free scan's placeholder check catches filenames and bare words such as "image" or "graphic", and a phrase like "blue wave divider" passes it.
• Information hidden. A product photo with alt="" tells a screen reader user to skip the product. Rule engines read an empty alt as a deliberate choice, so it passes the usual rule checks.

Our sample report shows both on a deliberately flawed demo store, under the labels "Wrongly marked decorative" (a tent photo with an empty alt) and "Decoration being narrated" (a described divider).

How our alt text checker grades them

Our alt text checker downloads an image and compares it with its alt text. It files both mistakes under a single decorative-mismatch verdict: a description on an image that is purely decorative, or an empty alt on an image that plainly carries information. Its instructions tell it to mark an image accurate when it is genuinely unsure, and to judge only what it can see. Three limits follow:

• It sees the image and its alt text, not the paragraph beside it. A picture that is decorative because the adjacent text already describes it cannot be judged from the picture alone. That call stays with you.
• It opens up to six images per page. Images with alt text come first, and images marked alt="" are opened only if slots remain. An image with no alt attribute at all is reported by the rule check, not opened.
• It allows one free check a day, after you leave an email address once.

In our own test of 124 alt texts, an empty alt on a decorative image was left alone in 6 of 6 verdicts, a description on a decorative image was flagged in 5 of 6, and an empty alt on a real product photo was flagged in 29 of 30. The set held only two decorative images, so treat those as a few observations and not as rates. The full tables are in our AI alt text accuracy test.

The alt text generator helps from the other side. When the model judges an image purely decorative, it marks the draft "decorative?" and still writes a fallback description, and the CSV export has a decorative column. Both are prompts for your decision, not a ruling.

A checklist for any image

1. Is the image the only content of a link or button? Give it an alt that names the destination or action. It is not decorative.
2. Does it show text, data or a product that appears nowhere else on the page? Describe it.
3. Would a listener lose anything if it vanished? If so, describe it.
4. Does nearby text already say what it shows? Use alt="", or write alt text that adds only what the text lacks.
5. Is it purely styling? Move it to CSS if you can. Otherwise use alt="" and no title attribute.
6. Still unsure? Write a short description and come back to it. An unneeded phrase costs a listener a moment, while a hidden product costs them the product. This is our judgment, not a W3C rule.

Decorative decisions are one part of making a website accessible. No automated tool, ours included, can settle them for you, and what we check lists exactly what is and is not covered.