Your images don't need alternative text

You've just added alt to every image on your site. Your QA colleague is happy, Lighthouse stops flagging errors. Except a screen reader user just heard 15 useless descriptions before reaching the content.

You've created a new accessibility problem while trying to solve one.

How to distinguish images that communicate from those that should be silent

#Why adding alt everywhere degrades the user experience

Clutter. A screen reader announces each image with its alternative text. If the image is decorative, this text is pure noise: it interrupts reading, buries useful information, and fatigues the user. The W3C states it explicitly: text values on decorative images "add clutter to screen reader output or can distract users".

In practice. Take an e-commerce product page. 15 images: a lifestyle photo in a banner, separators, icons with visible labels, rounded corners. You add descriptive alt to each. A VoiceOver user hears: "Image banner lifestyle man smiling in front of computer, horizontal blue separator, shopping cart icon, star icon, decorative image rounded corner..." 15 interruptions before reaching the product price.

The cumulative effect. If you have 18 decorative images with descriptive alt, the screen reader repeats 18 times text unrelated to content. Reading time explodes.

The spec says otherwise. The reflex "I add alt everywhere to be compliant" is wrong. WCAG 1.1.1 (Level A) explicitly requires that decorative images be "implemented so they can be ignored by assistive technologies". Compliance means empty alt on decorative images. Not descriptive alt.

The numbers. According to the WebAIM Million 2025 report, 18.5% of images have no alt at all. And 13.4% of images that have alt have questionable or repetitive text: alt="image", alt="graphic", alt="blank", a filename, or alt identical to adjacent text. Do the math: nearly one-third of images on the most visited sites have missing, questionable, or repetitive alt. Out of 3 images, 1 has a problem.

The real reflex. Advice like "add alt everywhere" is simplistic. It dates from a time when the web was different. Today, a developer who applies this rule without discernment creates as many problems as it solves.

EAA and web accessibility: what changes for your business in 2026

#Alt text and SEO: what Google really says

People often hear: "Every image must have alt for SEO." The reality is more nuanced. Google recommends alternative text for informative images, but useless alt on a decorative image provides no SEO benefit. According to Google's documentation on images, good alt for accessibility IS good alt for SEO.

Keyword stuffing in alt text is the worst possible strategy. Google actively penalizes it, and it's catastrophic for accessibility. A screen reader user who hears alt="men's shoes cheap fast shipping free delivery sales promotion shoes" on a product photo receives no useful information.

Your SEO manager asks you to "put keywords in all alt text"? Respond with facts: good alt describes the image content in one natural sentence. That's exactly what Google values.

<!-- ❌ Keyword stuffing: penalized by Google, useless for the user -->
<img src="sneakers.jpg" alt="men's shoes cheap sneakers sales free shipping promotion" />
 
<!-- ✅ Descriptive alt: good for SEO AND accessibility -->
<img src="sneakers.jpg" alt="White Runner sneakers, side view." />

The two objectives don't oppose each other. They converge.

Accessibility and SEO: How the same fixes boost your Google rankings

#Four types of images that should NOT have alternative text

The W3C WAI identifies several categories of decorative images. The test is simple: an image is decorative if users can accomplish all tasks and understand all information on the page without it. If you remove the image and nothing is missing: alt="".

#Type 1: Decorative and layout images

Ambient photos, borders, separators, rounded corners, spacers, tracking pixels. These are visual artifacts, not content. They convey no information.

<!-- ❌ Screen reader announces "horizontal blue separator" -->
<img src="separator.png" alt="horizontal blue separator" />
 
<!-- ❌ Screen reader announces "spacer" -->
<img src="spacer.gif" alt="spacer" />
 
<!-- ✅ Screen reader says nothing -->
<img src="separator.png" alt="" />
<img src="spacer.gif" alt="" />

#Type 2: Images redundant with adjacent text

The photo illustrates text that already describes it. Describing the image in alt creates a duplicate.

<!-- ❌ Duplicate: the text already says the same thing -->
<p>Our team at the ParisWeb 2025 conference.</p>
<img src="team-parisweb.jpg" alt="The team at the ParisWeb 2025 conference" />
 
<!-- ✅ Image is redundant, empty alt -->
<p>Our team at the ParisWeb 2025 conference.</p>
<img src="team-parisweb.jpg" alt="" />

#Type 3: Icons accompanied by visible label

A trash icon next to the text "Delete". If you describe the icon, the screen reader announces the label twice.

<!-- ❌ Screen reader says: "Trash icon, Delete" -->
<button><img src="trash.svg" alt="Trash icon" /> Delete</button>
 
<!-- ✅ Screen reader says: "Delete, button" -->
<button><img src="trash.svg" alt="" /> Delete</button>

#Type 4: Images in a link that already contains text

The logo in a link to the homepage, when the link also contains the text "Home".

<!-- ❌ Screen reader says: "Includdy logo, Home, link" -->
<a href="/"> <img src="logo.svg" alt="Includdy logo" /> Home </a>
 
<!-- ✅ Screen reader says: "Home, link" -->
<a href="/"> <img src="logo.svg" alt="" /> Home </a>

#How to properly hide a decorative image

Four techniques exist. Each has its context.

#alt="": the standard method

It's the method recommended by the W3C. The screen reader completely ignores the image.

One critical detail: the alt must be strictly empty. A space (alt=" ") is detected by some screen readers. Geoff Graham (CSS-Tricks) confirms it: "Be sure it's truly an empty string because even a space gets picked up by some assistive tech." Real tests show that NVDA with alt=" " (space) announces "graphic", while with alt="" (empty) it says nothing.

And above all: never remove the alt attribute itself. Writing <img src="photo.jpg"> without an alt attribute is worse than anything. The screen reader announces the filename: "photo-DSC0042.jpg". An alt with a filename causes problems in 96 screen reader/browser combinations.

<!-- ❌ Worst option: no alt attribute at all -->
<img src="DSC_0042.jpg" />
<!-- Screen reader says: "DSC underscore 0042 dot jpg, image" -->
 
<!-- ❌ Space in the alt -->
<img src="decoration.jpg" alt=" " />
<!-- NVDA says: "graphic" -->
 
<!-- ✅ Strictly empty alt -->
<img src="decoration.jpg" alt="" />
<!-- Silence -->

#aria-hidden="true": for inline SVG

An <svg> element cannot have an alt attribute. To hide a decorative SVG icon, use aria-hidden="true". This removes the element and all its children from the accessibility tree.

<!-- Decorative icon in a button with text -->
<button>
    <svg aria-hidden="true" viewBox="0 0 24 24">
        <path d="M6 19c0 ..." />
    </svg>
    Delete
</button>

Caution: never use aria-hidden="true" on a focusable element. A button with aria-hidden="true" remains focusable by keyboard but invisible to screen readers. The user navigates into nothing.

#CSS background-image: the image doesn't exist in the DOM

The WCAG C9 technique recommends CSS for purely visual images. Advantage: the image doesn't exist in the DOM, no assistive technology detects it.

/* Decorative image in CSS: invisible to assistive technologies */
.hero-banner {
    background-image: url("hero-ambiance.jpg");
    background-size: cover;
}

This is the cleanest technique for ambient photos and layout decorations.

#When an image needs alternative text

The test is simple: if removing the image causes information loss to the reader, it needs alt. But the alt doesn't describe the image's appearance. It describes its function or information.

Three categories of images require alt:

#Informative images

They convey information that the text doesn't provide. Product photos, screenshots, charts.

<!-- ❌ Pointless: screen reader already says "image" -->
<img src="chart.png" alt="Chart" />
 
<!-- ✅ The alt conveys the chart's information -->
<img src="chart.png" alt="Chart: decrease from 21.6% to 18.5% of images without alt between 2024 and 2025." />

#Functional images

They trigger an action (link, button). The alt describes the destination or action, not the image.

<!-- ❌ Describes the image, not the action -->
<a href="/"><img src="logo.svg" alt="Blue and green logo with Includdy text" /></a>
 
<!-- ✅ Describes the link's destination -->
<a href="/"><img src="logo.svg" alt="Includdy Home" /></a>

#Complex images

Charts, infographics, diagrams. Short alt isn't enough. Combine concise alt with a long description.

<figure>
    <img src="infographic.png" alt="Infographic: the 5 most common alt-text mistakes." />
    <figcaption>
        <!-- Detailed description accessible to everyone -->
        The five mistakes: missing alt (18.5% of images), generic alt ("image", "photo"), alt = filename, redundant alt with text, alt on decorative image. Source: WebAIM Million 2025.
    </figcaption>
</figure>

Two often-forgotten rules: don't start with "Image of" or "Photo of" (screen reader already announces "image"), and end with a period so the screen reader pauses.

Recommended length: approximately 150 characters maximum. Beyond that, use a long description.

#The 4-question decision tree

Before writing alt, ask yourself these 4 questions in order. The W3C WAI decision tree covers most cases.

Question 1: Does the image provide information that the surrounding text doesn't? No → alt="". It's a decorative image.

Question 2: Is the image in a link or button? Yes → the alt describes the destination or action. Not the image.

Question 3: Does the image contain text? Yes → the alt reproduces that text. Unless the text already appears next to the image.

Question 4: Is the image a complex chart or diagram? Yes → short alt (one-sentence summary) and long description (in <figcaption> or a link).

You need to handle 50 images on a page? With these 4 questions, you know in 10 seconds what to do for each. No need to reread the WCAG specification every time.

The WCAG 3 draft confirms this approach with an even simpler question: "would removing the image change the page's comprehension?" No → decorative image → alt="".

#How to verify your images in practice

Automated tools have a blind spot on alternative text. They find missing alt, but not useless alt.

Detecting that an image lacks alt is easy. Determining whether existing alt is relevant is another matter. No automated tool can reliably do this.

Your site passes Lighthouse at 100 on accessibility? Lighthouse checks the presence of alt, not its relevance. The WebAIM Million 2025 confirms it: 13.4% of images with alt have questionable or repetitive text. An automated tool can't know if your alt="photo" on a decorative image is a problem.

Concrete scenario: you run an automated audit. 0 errors on images. In reality, 12 decorative images have redundant alt that pollutes the experience for screen reader users. The tool doesn't detect it.

What an automated tool detects:

• Missing alt (<img src="photo.jpg"> without alt attribute)
• alt = filename (alt="DSC_0042.jpg")
• Generic alt (alt="image", alt="photo")

What it doesn't detect:

• Descriptive alt on a decorative image (false-positive accessibility)
• alt redundant with adjacent text
• alt that describes appearance instead of function
• alt too long or vague to be useful

Tools like Includdy go further than basic detection: they identify decorative images with unnecessary alt, not just missing alt. It's the difference between "all your images have alt" and "all your alt text is relevant".

For quick manual verification: enable VoiceOver (macOS: Cmd+F5) or NVDA (Windows, free) and navigate your page. Each time the screen reader announces an image unrelated to content, that's an alt to fix.

WCAG compliance on images isn't summed up as "alt on every image". It's "the right alt on every image". Four questions, a decision tree, and 90% of your images are handled correctly.

To automatically identify missing alt AND unnecessary alt on your images, try Includdy.

Frequently asked questions