Alt Text Edge Cases: Logos, Decorative Images, Product Photos, and More

The short version: decorative images get an empty alt attribute (alt="" — present, but blank) so screen readers skip them. Logos get the brand name as alt text — or the link destination, like “Acme home,” when the logo is clickable. Product photos get a description of what the shopper learns from that specific image, not a repeat of the product title. Those three rules settle most of the arguments — but the edge cases are exactly where most sites get it wrong.

Our alt text guide covers the fundamentals: describe content and function, keep it short, skip “image of.” This article is the sequel for the images that don’t fit neatly — the ones your web person stares at wondering which rule applies. The frustrating part of researching this topic is that the authoritative sources each answer one fragment: the W3C covers decorative images on one page and logos on another, Section508.gov covers text-in-images, university accessibility offices cover their own house style. Here’s the whole tree in one place.

Should logos have alt text?

Yes — a logo is never a decorative image. Section508.gov’s alt text guidance is blunt about it: logos require alt text, including “any text in the logo word for word.” A blind visitor arriving on your site deserves to know whose site it is, the same as everyone else.

What the alt text should say depends on one question: is the logo a link?

If it’s not a link, the brand name is enough. WebAIM’s alternative text guide notes that alt="Acme Company" “will usually suffice” and that the word “logo” is typically unnecessary — screen readers already announce it as a graphic, so “Acme Company logo graphic” is redundant twice over.

If it’s a link — and nearly every header logo links to the homepage — describe the destination, not the picture. The W3C WAI functional images tutorial says the alt text “should convey the action that will be initiated… rather than a description of the image,” and its own example is the W3C logo with alt="W3C home".

The one exception: a logo image sitting inside the same link as visible text that says the same thing. If your footer has the logo image and the words “Acme Company” wrapped in one link, give the image alt="" — otherwise a screen reader announces “Acme Company, Acme Company” on a single link.

One related rule surprises people: your logo is also exempt from the ban on pictures of text. WCAG 1.4.5 Images of Text requires real text instead of text baked into images, but the W3C’s Understanding document states that “logotypes (text that is part of a logo or brand name) are considered essential” — so a wordmark image is fine, as long as its alt text carries the words.

When is an image decorative — and what does it get?

An image is decorative when a visitor could complete every task and understand all the information on the page without it. Border flourishes, abstract hero textures, a stock photo of a smiling person that exists purely to set a mood, an icon that repeats the text right next to it — all decorative. The W3C WAI decorative images tutorial defines these as images that “don’t add information to the content of a page.”

The correct markup is an empty alt attribute: alt="". That’s not laziness — it’s an instruction. It tells assistive technology “nothing to see here, move along,” and WCAG 1.1.1 Non-text Content explicitly provides for it.

What you must not do is delete the attribute entirely. Per the same W3C tutorial, “when it is not provided, some screen readers will announce the file name of the image instead” — so your visitor hears “hero-banner-final-v3-compressed.jpg.” Missing alt and empty alt look almost identical in your code and behave completely differently for a blind user.

This distinction is not a niche problem. According to the WebAIM Million report, 53.1% of the top one million home pages had images with missing alternative text in February 2026 — 16.2% of all images found, about 10.8 per page. Worse, one out of every four linked images was missing alt text, which turns a picture problem into a navigation problem: the link itself has no name.

What alt text do product photos need?

Describe what the shopper learns from that photo that the text on the page doesn’t already say. A product photo is informative, never decorative — it’s frequently the deciding factor in a purchase — but its alt text should complement the product title, not clone it.

A useful test: imagine reading the product page aloud over the phone. You’d say the name and price once, then describe the pictures by what each one shows — “here’s the side view, there’s a padded laptop sleeve,” “in this one the jacket’s cuffs are ribbed.” That’s your alt text.

Two ecommerce-specific traps. First, keyword stuffing: alt text jammed with search terms reads as spam to a human listener and does nothing extra for rankings. Second, swatches and thumbnails that are actually buttons — those are functional images, so the alt describes the action (“Select olive green”), not the picture. If your store runs on a platform like Shopify, our screen reader checkout walkthrough shows what happens downstream when product imagery goes silent.

What about images that contain text?

The text goes in the alt attribute, word for word. Section508.gov requires including the text “word for word” when an image contains words that aren’t rendered as real text — a sale banner, a quote graphic, an infographic headline.

But treat that as the fallback, not the plan. WCAG 1.4.5 says to use actual text whenever your technology can achieve the same look, because people with low vision can’t resize, recolor, or re-space words trapped in a JPEG. The W3C’s alt decision tree recommends web fonts and CSS styling instead of images of text. Modern CSS can reproduce almost any banner design, so “we needed that font” rarely survives scrutiny — with the logotype exception covered above.

Do CSS background images need alt text?

They can’t have alt text — the alt attribute only exists on img elements — and for decoration, that’s exactly right. The W3C’s decision tree explicitly recommends using “CSS background images for decorative images.” A background texture or hero gradient needs no announcement.

The edge case is a background image that carries meaning: a chart dropped in as a background-image, a “50% off” banner, a portrait in a team bio card. Screen readers have no way to reach it. The fix is one of two moves: put it in a real img element with proper alt text, or keep the CSS and add role="img" plus an aria-label on the container. If content is hiding in your stylesheets, that’s the kind of structural issue a proper remediation pass fixes at the code level rather than papering over.

The full decision tree

Run any image through these questions, in order:

1. Is it a link or a button (including swatches and thumbnails)? Alt text describes the destination or action: “Acme home,” “Search,” “Select olive green.”
2. Is it a logo? Brand name as alt text — plus destination if linked; alt="" only if it sits beside identical link text inside the same link.
3. Does it contain words? Put them in the alt word for word — then ask whether it should be real text instead (logotypes exempt).
4. Does it teach the visitor something the page text doesn’t? Describe that thing, briefly. For charts and diagrams, name the type and the takeaway, with full data in text nearby.
5. Is it a product photo? Informative — describe what this specific shot shows: variant, angle, detail, context.
6. None of the above? It’s decorative: alt="" — or move it to a CSS background and skip the markup question entirely.
7. Never ship an img with no alt attribute at all.

How to check your own site in five minutes

You don’t need to view source page by page. Paste a URL or your HTML into our free alt text checker and it flags images with missing alt attributes, suspect values like file names, and empty alt on linked images — the exact failure the WebAIM Million data shows on one in four linked images. Then spot-check the flagged images against the seven questions above, because a tool can tell you alt text is missing but only a human can tell you it’s wrong.

That last point matters for the edge cases in this article. alt="header-logo.png" and alt="" on your main product photo both pass an automated scan’s “has an alt attribute” check while failing real users — it’s the same gap we document in why automated scans miss issues.

Alt text is one criterion out of fifty in WCAG 2.1 AA — if images are shaky on your site, keyboard access and form labels usually are too. Run a free accessibility scan to see where your site actually stands, images included.