The two lives of an image

What it says when you're not looking

Open the last page you deployed. Look at the first image. You see it, you know what it shows, why it's there, what it adds to the content.

Now close your eyes. What does it say?

If you filled in its alt text, it says exactly what you wrote. If you left the attribute empty, it says nothing. The screen reader ignores it. If you didn't add the attribute at all, it says its file path. "IMG_4872.jpg". And if you filled it for SEO, it recites a list of keywords that describes nothing.

An image on the web has two lives. The one you see, and the one you read. Most of the time, no one takes care of the second.

This article will show you how to write the second life of your images. So they say the same thing to everyone.

Four images, four treatments

Not all images are equal, and not all need the same treatment. The first question to ask yourself when facing an image isn't "what do I write in the alt?" It's "does this image convey information?"

Small decorative image: serve it in CSS

A background pattern, a graphical border, a purely aesthetic icon. If the image conveys no information, it doesn't belong in the HTML. Serve it in CSS via background-image or a pseudo-element. The screen reader ignores it natively, no alt to manage.

Large decorative image: alt=""

A hero, a full-width mood photo. If it's the largest visible element on screen, it's your LCP. The performance metric that measures the display time of the largest element. A CSS image is discovered later in the page load than an <img> tag, which penalizes your performance score. So serve it in HTML with an empty alt:

<img src="hero-bg.jpg" alt="" loading="eager">

alt="" is not the same as a missing alt. alt="" tells the screen reader: "this image is decorative, ignore it." A missing alt says: "no one thought about this image", and the screen reader announces the path and filename.

Simple informative image: describe the intent, not the image

A clickable logo, a profile photo, an illustration accompanying a point. The alt doesn't describe what the image shows, it describes what it contributes in its context.

<a href="/">
  <img src="logo.svg" alt="Home — Bariafuri"  loading="eager">
</a>

The logo shows Bariafuri's symbol. But what matters to the user who can't see it is that this link goes to the homepage. The alt describes the destination, not the image.

Complex image: <figure> + <figcaption> (for example) + extended description

A chart, an infographic, an annotated screenshot. The information is too rich to fit in a few-word alt. Use a two-level structure:

<figure>
  <img
    src="chart-sales-q1.png"
    alt="Q1 2026 sales evolution by region"
    aria-describedby="chart-data"
    loading="lazy"
  >
  <figcaption>
    Q1 2026 sales — growth driven by Europe.
  </figcaption>
</figure>
 
<details>
  <summary>Detailed chart description</summary>
  <p id="chart-data">Sales grew by 23% in Europe,
     12% in North America and 8% in Asia-Pacific.
     Europe now accounts for 45% of total revenue,
     up from 38% in Q1 2025.</p>
</details>

The alt gives the chart's subject. The <figcaption> gives editorial context, it's not a duplication of the alt, it's a complement. And the <details> contains the full data description, accessible to all: screen readers, search engines, LLMs, and users when the image doesn't load. A detail that matters: the aria-describedby targets the <p> inside the <details>, not the <details> itself. Otherwise the description would pick up the <summary> text, and the exposure of collapsed content varies from one screen reader to another. Here I used a figure tag with a figcaption tag, but you can use other tags. It all depends on the context.

Describing what you can't see

Writing good alt text isn't describing an image. It's answering a question: what does this image contribute here that the surrounding text doesn't already say?

If the image illustrates a point already explicit in the paragraph, it's probably decorative: alt="". If it brings new information (a result, a demonstration, a proof), then the alt text must carry that information.

Some concrete examples:

• Before: alt="Photo of Yoann Fortin sitting at a desk in front of a computer screen with a green plant next to him"
• After: alt=""

The name is already in the surrounding text. Section heading, introductory paragraph. The photo illustrates a person already identified. Repeating their name in the alt creates redundancy for the screen reader. The image is decorative in this context.

• Before: alt="Screenshot"
• After: alt="The Submit button is hidden by the footer in mobile viewport"

"Screenshot" says nothing. The information is the bug. That's what the alt text must carry.

• Before: alt="Trash icon"
• After: alt=""

The button already says "Delete". The icon is decorative, it visually reinforces a label that already exists. Describing it on top creates redundancy for the screen reader: "Trash icon, Delete".

The rule fits in one sentence: alt text doesn't describe what the image shows, it carries what the image says.

Think of a restaurant menu. A good dish on the card isn't a list of its ingredients, it's a sentence that makes you want to order it and warns you if you can't eat it. Alt text is that sentence.

Sources

• WebAIM Million 2026 Report
• Stevie Wonder on Apple's accessibility (2011)
• BroadbandSearch — Internet statistics
• Google Spam Policies — Cloaking
• 24 jours de web — Accessibility vs SEO
• ADA.gov — Web accessibility rule fact sheet