"Image. Image. Image. Image."
It's a Thursday night and Priya is trying to buy her brother a birthday gift before the store closes out its sale. She's a screen reader user, and she's landed on a product page for a pair of hiking boots.
Her screen reader announces the page. "Image," it says. Then, a beat later, "Image." Then "Image" again. Then one more "Image," flat and identical, four times in a row.
Those four images are the entire product gallery — the boot from the front, the side, the sole tread, and a lifestyle shot of someone wearing them on a trail. Priya has no idea which is which, what color the boots actually are, or whether they're the pair her brother wanted. A few lines down, a size chart renders as a fifth silent image — no description, no data, nothing a screen reader can pass along. And the icon she needs to actually buy the boots, the add-to-cart button, isn't announced as a button at all. It's just another wordless image, indistinguishable from decoration.
Priya gives up and closes the tab. That's not a hypothetical. It's the daily, unremarkable experience of encountering a site built without a real understanding of alt text — and it's a direct, documented failure of one of the oldest rules in web accessibility.
The Rule Behind All of This: WCAG 1.1.1
Success Criterion 1.1.1 Non-text Content, Level A, requires that every non-text element on a page — every image, icon, chart, and graphic — has a text alternative that serves the same purpose the visual element does.
It's Level A, meaning it's about as foundational as WCAG gets. It's also, despite being one of the oldest criteria in the standard, still one of the most frequently violated in real, live websites. Not because teams don't know alt text exists — almost everyone does — but because they treat it as a single checkbox instead of a decision that changes depending on what the image is actually doing.
That's the real lesson here: there is no one correct way to write alt text. There are (at least) four different jobs an image can be doing, and each one needs a different kind of answer.
The Four Types of Images, and How Each One Should Be Described
1. Decorative images: say nothing, on purpose
A background flourish. A stock photo dropped in purely for visual texture, carrying zero information relevant to the content around it. These images should get an empty alt attribute: alt="".
This is the counterintuitive part people get wrong in both directions. An empty alt attribute isn't a shortcut or a cop-out — it's an explicit instruction that tells a screen reader "skip this, there's nothing here for you," and the image is silently passed over.
What's actually worse than an empty alt is no alt attribute at all. Leave the attribute off entirely, and some screen readers fall back to reading the filename out loud. That's how a user ends up hearing "IMG underscore four eight two one dot jpg" in the middle of a sentence — noise that's worse than silence, and a genuinely common failure on CMS platforms that auto-populate alt text from the filename by default.
2. Functional images: describe what they do, not what they look like
An icon used as a button. A logo that links back to the homepage. A magnifying glass that triggers search. These aren't decoration — they're interactive controls, and their alt text needs to describe their function, not their appearance.
This is the difference between an icon-only hamburger menu with alt text of "arrow icon" and one with "Submit search." The first tells a screen reader user nothing useful — arrow icon could mean anything. The second tells them exactly what happens if they activate it. Function, not form. If pressing it submits a search, opens a menu, or adds an item to a cart, that's the alt text: "Submit search," "Open menu," "Add to cart."
Icon-only buttons with zero alt text or aria-label — hamburger menus, search icons, social media icons — are one of the most common real-world failures out there. They're often invisible to a sighted reviewer, because sighted users get the icon's meaning from its shape. A screen reader user gets nothing from the shape at all.
3. Informative images: describe the content, in context
A product photo. A diagram illustrating a process. These images carry real information, and the alt text needs to convey the content that's actually relevant given the surrounding context — not just repeat the product title that's already sitting in a heading two lines above.
Go back to Priya's boots. A product gallery where every thumbnail carries identical alt text like "product photo" is exactly the kind of failure that shows up constantly on e-commerce sites. It technically satisfies "there's an alt attribute," and it's completely useless in practice, because it gives no way to tell four different images apart.
Better alt text for that same gallery would differentiate by what's actually shown and unstated elsewhere on the page: "Tan hiking boot, front view, laces untied," "Tan hiking boot, side profile showing ankle support," "Close-up of boot sole tread pattern." Each one adds information the page doesn't already say out loud.
4. Complex images: a short summary, plus something more
A chart. An infographic. A diagram carrying real data. These usually can't be meaningfully compressed into a short alt attribute — trying to cram an entire bar chart's worth of data points into one alt string produces something unreadable and still incomplete.
Best practice here is a two-part answer: a brief alt summary that names what the image is and its overall takeaway, plus a fuller text description placed near the image or linked from it — a data table version of the chart, for instance, that a screen reader can actually navigate cell by cell. That size chart Priya hit in silence is a textbook case: it's carrying real data (measurements, sizes), and an image with no alt text and no accompanying table means that data simply doesn't exist for her.
What Not to Do: Two Habits Worth Killing
Don't start alt text with "image of" or "picture of." A screen reader already announces the element as an image before it reads the alt text. Adding "image of" is redundant noise that eats into whatever attention span the user has for that sentence — the accessible equivalent of starting every sentence with "I am now saying that..."
Don't keyword-stuff alt text for SEO. Alt text should generally stay concise — roughly under 125 characters is a common practical guideline, though WCAG sets no hard length limit — and it should describe the image, not try to rank for five product keywords at once. Stuffed alt text is bad for the screen reader user reading it and can get flagged as manipulative by search engines. It fails on both fronts at once.
A Quick Alt Text Checklist
Before you ship a page, walk your images through this:
- Is it purely decorative? Use
alt="". Never leave the attribute off entirely. - Is it a button, link, or icon that does something? Describe the function ("Submit search," "Open menu"), not the shape.
- Is it a product photo, diagram, or content image? Describe what's relevant and not already stated elsewhere on the page.
- Is it a chart, graph, or infographic with real data? Write a short alt summary and provide a fuller description or data table nearby.
- Does it start with "image of" or "picture of"? Cut it.
- Is it stuffed with keywords instead of describing the image? Rewrite it plainly.
- Did your CMS auto-fill the alt text with a filename? Check for it — it's one of the most common silent failures on any platform.
Get This Right, Image by Image
Alt text looks like a small detail until you're the person who can't tell four product photos apart, can't read a size chart, and can't find the button to actually buy something. WCAG 1.1.1 has been around since the earliest version of the standard for exactly that reason — it's foundational, not optional, and it's still one of the most commonly failed criteria on real sites because "add some alt text" and "add the right alt text for this specific image" are two very different jobs.
Most sites have hundreds or thousands of images, spread across product pages, icons, navigation, and content — and a single CMS default or a copy-pasted template can quietly break alt text sitewide. Catching that requires going through every image type, one by one, and asking what job it's actually doing.
That's the audit WCAG.World runs for clients: a criterion-by-criterion pass through every image on your site, sorted by type, fixed with alt text that actually holds up for a screen reader user — not just present enough to pass an automated scanner. Get your images audited against WCAG 1.1.1 before the next Priya lands on your product page.