Decorative Images: When to Leave Alt Text Empty

Here is a question I get from clients after almost every SEO audit: “The tool says 140 images are missing alt text. Should I write alt text for all of them?” Many people believe every single image on a page needs a description, and that any empty alt attribute is an SEO mistake.

It isn’t that simple. Some images carry information, and they need good alt text. Others are pure decoration: dividers, background textures, swooshes, icons sitting next to a text label. For those, the right answer is usually an empty alt attribute, written as alt="". Describing them doesn’t help Google, and it makes life harder for people using screen readers.

Let me explain, in plain words, how to tell decorative images from informative ones, what empty alt actually does, how to handle icons, logos and linked images, when to move decoration into CSS, how to test with a real screen reader, and why your audit tool may still complain.

Decorative or informative? The one question that decides it

The Web Content Accessibility Guidelines (WCAG), the main accessibility standard, define pure decoration very precisely:

“serving only an aesthetic purpose, providing no information, and having no functionality”

— W3C, Understanding Success Criterion 1.1.1: Non-text Content

So an image is decorative only when all three are true: it is there for looks, it tells the reader nothing new, and it doesn’t do anything when clicked. WebAIM suggests a simple test that I use all the time: if you removed the image, would the reader lose any information? If not, it is probably decorative.

The W3C’s decorative images tutorial lists the typical cases:

• Visual styling, such as borders, spacers and corners.
• Images that sit next to link text just to make the link look nicer or bigger.
• “Eye-candy” photos that illustrate the text without adding information.
• Images that are already fully described by the text around them.

Notice that last one. An image can show something real, like a photo of a dog, and still be decorative if the caption or paragraph next to it already says everything the image shows. The decision depends on why the image is on the page, not just what it shows. That is why the same photo can be decorative on one page and informative on another. Our guide to image captions and surrounding text covers how nearby text changes what an image needs.

If you are new to alt text in general, start with our lesson on image SEO basics and our full guide to writing alt text for SEO and accessibility. This article is about the edge case where the best alt text is no text.

What alt="" actually tells a screen reader

A screen reader is software that reads a web page out loud for people who are blind or have low vision. When it reaches an image, it looks at the alt attribute. What it does next depends on what it finds.

Markup	What a screen reader typically does	When to use it
alt="Dalmatian puppy playing fetch"	Announces the image and reads the text	Informative images
alt="" (empty, also called “null”)	Skips the image entirely	Decorative images
No alt attribute at all	May guess, often by reading the file name, such as “wave underscore divider dot svg”	Never
alt=" " (a space)	Behavior is less predictable across tools	Avoid; use a truly empty value
alt="decorative image" or alt="spacer"	Reads those words out, which is pure noise	Never

The difference between the second and third rows is the heart of this topic. WebAIM puts it clearly:

“Every image should have an alt attribute, even if it’s alt="" (sometimes called “null” alternative text).”

— WebAIM, Alternative text

Here is what that looks like in code:

<!-- Decorative: screen readers skip it -->
<img src="/images/wave-divider.svg" alt="">

<!-- Wrong: no alt attribute at all; some screen readers read the file name -->
<img src="/images/wave-divider.svg">

The W3C’s decorative images tutorial says the same: don’t leave the alt attribute out, because some screen readers will then announce the file name. An empty alt is a deliberate choice. A missing alt is an accident.

Walking through the W3C decision tree on real page elements

The W3C publishes a short alt decision tree that I recommend to every content team. Here is how I would use it, step by step, on any image:

1. Does the image contain text? If the same text also appears as real text nearby, use alt="". If the text appears nowhere else, put it in the alt.
2. Is the image used in a link or a button? If people would struggle to understand what the link or button does without it, the alt must describe the destination or action.
3. Does the image add meaning to the page? If yes, give a short description. If it is a chart or complex graphic, also give the information in the page text. If it only repeats nearby text, use alt="".
4. Is the image purely decorative or not meant for users (like a tracking pixel)? Use alt="".
5. Still unsure? Go back to the W3C images tutorial for the specific case.

The order matters. Links and buttons come before “is it decorative?” because a clickable image is never purely decorative, even if it looks like decoration.

Icons, dividers and background flourishes: a verdict for each

Here is a quick reference for the elements I see most often on business websites.

Element	Usually decorative?	What to do
Section divider, wave or line graphic	Yes	alt="", or move it to CSS; consider an <hr> if it marks a real topic change
Background texture or pattern	Yes	Put it in CSS as a background image
Icon next to a text label (phone icon + “Call us”)	Yes	alt="" or aria-hidden="true" on an inline SVG
Icon with no text label (a lone printer icon button)	No, it is functional	Alt describes the action: “Print this page”
Star rating graphic	No	Alt gives the rating, such as “Rated 4.5 out of 5,” unless the number is shown in text next to it
Generic stock mood photo (smiling team at a laptop)	Often yes	alt="", unless it shows something specific the reader needs
Product photo	No	Descriptive alt text
Chart, graph or diagram	No	Short alt plus the key information in text
Author headshot next to the author’s name	Usually yes	alt="", since the name is already there

Stock photos deserve a word. Ahrefs’ alt text guide points out that purely decorative images and generic stock photos add no meaningful information, and that describing them adds clutter for screen reader users. I agree. Often, though, the better fix is to replace a meaningless stock photo with an image that actually shows something. Our guide on original images vs stock photos explains why.

For icons built as inline SVG files, the markup is a little different. You can hide them with aria-hidden="true":

<a href="/contact/">
  <svg aria-hidden="true" focusable="false" width="16" height="16">...</svg>
  Contact us
</a>

Our guide on SVG icons and background images goes into SVG markup in more depth.

Linked images are never decorative on their own

This is the mistake that causes the most real harm. An image inside a link has a job: it takes people somewhere. If its alt is empty and there is no other text in the link, the screen reader has nothing to announce. It may read the URL, or just say “link.”

The W3C describes this group of images simply:

“Functional images are used to initiate actions rather than to convey information.”

— W3C Web Accessibility Initiative, Functional images tutorial

It also matters for Google. When an image is a link, Google treats its alt text like anchor text:

“For images as links, Google uses the alt attribute of the img element as anchor text.”

— Google Search Central, Link best practices for Google

So an empty alt on an image-only link gives that link no anchor text at all. Here is how to handle the common cases:

<!-- Logo is the only content of the link: alt names the destination -->
<a href="/"><img src="/logo.svg" alt="Bright Roofing home"></a>

<!-- Icon next to visible link text: the icon can be hidden -->
<a href="/pricing/"><img src="/icons/tag.svg" alt=""> See pricing</a>

<!-- Icon-only button: alt describes the action -->
<button type="submit"><img src="/icons/search.svg" alt="Search"></button>

The rule is easy to remember: if the image is the only thing inside the link, it needs alt text that says where the link goes. If the link also contains visible text that explains the destination, the image can be empty, so the screen reader doesn’t say the same thing twice.

This is not a rare problem. The 2026 WebAIM Million report, based on February 2026 data from one million home pages, found that 45% of images missing alt text were linked images, and that about one in four linked images had no alt text.

When a decorative image belongs in CSS instead

Both the W3C and WebAIM suggest that purely decorative images are best added with CSS where possible, rather than as <img> elements. A CSS background image is part of the design layer. Screen readers ignore it, and there is no alt attribute to get wrong.

<!-- In the HTML: no image element needed -->
<section class="hero">
  <h1>Roof repairs in Austin</h1>
</section>

/* In the stylesheet */
.hero {
  background-image: url("/images/hero-texture.webp");
  background-size: cover;
}

There is one important SEO trade-off. Google’s image guidelines state that “Google doesn’t index CSS images” (Google Search Central). For a texture or swoosh, that is exactly what you want. But I see sites put their main product photo or hero image, the one that should rank in image search, into CSS. That hides it from Google Images completely.

My rule of thumb:

• Use CSS for textures, patterns, gradients, dividers and purely atmospheric backgrounds.
• Use an img element with alt text for anything you would want someone to find in Google Images.
• Use an img element with alt="" for decorative images your CMS or page builder can only add as images.

If a content image is stuck in CSS because of how your theme works, it is a job for a developer. Our web development team fixes this kind of thing regularly.

Does empty alt text hurt SEO?

Let me answer this honestly, because it is the real worry behind most of the questions I get.

For truly decorative images, no, I don’t see a credible case that it hurts. A swirl graphic was never going to rank for anything useful. Writing “blue abstract swirl background” in its alt text doesn’t make your page more relevant to any search a customer makes. Google’s guidance on alt text is about describing images in a useful, information-rich way, and it warns against stuffing alt attributes with keywords.

Where empty alt does hurt is when it is used on the wrong images:

• Product photos that could rank in Google Images or Google Shopping.
• Charts and diagrams that explain your main point.
• Linked images, where the alt is the anchor text.
• Images of text, such as a promotional banner, when that text appears nowhere else on the page.

So the SEO risk is not “too many empty alts.” It is the wrong images marked as decorative, often because someone bulk-cleared alt text to silence an audit warning. Accessibility and SEO point the same way here, which is a theme we cover in our guide to where accessibility and SEO overlap.

Testing with a real screen reader in fifteen minutes

Reading markup is useful, but hearing your page is better. You don’t need special training to do a basic check. Here is a simple routine:

1. Pick a screen reader. On a Mac, VoiceOver is built in; turn it on with Command + F5. On Windows, NVDA is a free download.
2. Open one important page, such as your homepage or a key service page.
3. Move through the page element by element instead of reading it all at once. In VoiceOver, use Control + Option + Right Arrow. In NVDA, use the Down Arrow key.
4. Listen for file names, like “IMG underscore 4021 dot jpg.” Each one is an image with no alt attribute.
5. Listen for noise, such as “decorative swirl” or “blue background image.” Those are decorative images that should be empty.
6. Listen for silent links, where the reader says just “link” or reads a URL. Those are linked images with missing or empty alt.
7. Note each problem with the image file name, so a developer or editor can find and fix it.

Fifteen minutes on your top three page templates (home, service or product, and blog post) usually catches most problems, because the same header, footer and icons repeat across every page.

Why audit tools flag images you meant to hide

Different tools check different things, and that causes a lot of confusion. Here is how I read their warnings:

Tool type	What it usually reports	How to read it
Accessibility checker (axe, Lighthouse accessibility audit, WAVE)	Images with no alt attribute, and linked images with no accessible name	Fix these; an alt="" on a decorative image normally passes
SEO crawler (site audit tools, desktop crawlers)	Images with missing alt, and often images with empty alt too	Treat empty-alt items as a review list; many will be correct
Manual screen reader test	What a user actually hears	The final word on whether the page makes sense

The axe rule, for example, checks that every image has alternative text or is marked as presentational, and it treats alt="" as an accepted way to mark a decorative image, according to Deque’s documentation. It maps to WCAG success criterion 1.1.1.

SEO crawlers can’t know why an image is on your page, so many simply list all images with empty alt. That’s not wrong. It just means a person has to review the list. A good way to speed this up is to export the list, sort it by image URL, and look for patterns. If the same divider.svg appears on 600 pages, you only need to decide once. Our Screaming Frog guide shows how to pull these image reports.

The bigger picture shows why this is worth the time. The 2026 WebAIM Million found missing alternative text for images on 53.1% of home pages, the second most common accessibility failure after low-contrast text. And 16.2% of all images on those pages had no alt text, about 10.8 per page on average.

Questions about decorative images and empty alt text

Is alt="" the same as having no alt attribute?

No. An empty alt attribute tells screen readers to skip the image. A missing alt attribute leaves them guessing, and some will read out the file name instead. Every img element should have an alt attribute, even if it is empty.

Will empty alt text hurt my SEO?

Not for images that are truly decorative. Those images were never going to bring useful search traffic. What hurts is using empty alt on images that carry meaning, such as product photos, charts or linked images, because you remove context that people and Google need.

Should I use role="presentation" instead of alt=""?

For a normal img element, alt="" is the simplest and most widely supported choice. The W3C notes that role="presentation" can also hide an image but has less support than a null alt. For inline SVGs, aria-hidden="true" is the usual way to hide decorative graphics.

Why does my SEO audit tool still flag images with empty alt?

Many SEO crawlers report every image with empty alt text, because the tool can’t tell whether the image is decorative. Treat the report as a list to review, not a list of errors. Accessibility checkers such as axe accept alt="" as valid.

Are logos decorative?

Usually not. A logo that links to your homepage is a functional image and needs alt text that says where it goes, such as your company name or “Home.” A logo that appears right next to the same company name in text can use empty alt.

Can I write alt text for every image just to be safe?

It isn’t safer for screen reader users. Describing borders, swirls and stock mood photos adds noise they have to listen through. Describe images that carry meaning and hide the ones that don’t.

Where to start with decorative images on your site

If your audit lists hundreds of image warnings, don’t panic, and don’t bulk-fill them with keywords. Work in this order:

• Fix linked images and icon buttons with missing or empty alt first. They do the most harm.
• Add descriptive alt text to product photos, charts and other informative images.
• Set alt="" on dividers, textures, icons with text labels and generic mood photos.
• Move pure decoration into CSS when your theme allows it.
• Do a 15-minute screen reader check on your main templates.

If AI tools write your alt text, check that they leave decorative images empty. Our guide to AI-generated alt text covers that, and our guide to product image alt text covers the images that must always be described.

If you’d like a professional accessibility and code review, our W3C compliance optimization service covers alt text, markup and more. You can get a free quote and we’ll take a look at your site.

Further reading on decorative images alt text

• Internal Anchor Text Audit: Fixing Over-Optimized Links
• Mixed-Intent SERPs: What Content to Create When Results Disagree
• Original Images vs Stock Photos: Does It Matter for SEO?

Sources for this decorative images and alt text guide

1. W3C WAI: Decorative images tutorial
2. W3C WAI: An alt decision tree
3. W3C WAI: Functional images tutorial
4. W3C: Understanding Success Criterion 1.1.1 Non-text Content (WCAG 2.2)
5. WebAIM: Alternative text
6. WebAIM: The WebAIM Million (2026 report)
7. Deque University: axe rule image-alt
8. Google Search Central: Link best practices for Google
9. Google Search Central: Google image SEO best practices
10. Ahrefs: Alt Text for SEO