Most bad alt text is not lazy. It comes from asking the wrong question. "What is in this picture?" produces "Woman smiling at laptop". The better question is "What would someone lose if this image didn't load?" Sometimes the answer is a lot, sometimes nothing at all.
WCAG 1.1.1 Non-text Content (Level A) asks for a text alternative that serves the same purpose as the image. The purpose depends on where the image sits and what it does. Here is how we sort them.
Decorative images: say nothing
A background swirl, a divider, a stock photo that repeats the headline next to it. If removing the image loses no information, give it an empty alt so screen readers skip it:
<img src="swirl.svg" alt="">Empty is not the same as missing. With no alt attribute at all, some screen readers read the file name instead, and "swirl underscore final underscore v2 dot svg" helps nobody. CSS background images are skipped automatically, which is one more reason to put purely decorative images in CSS.
Informative images: say the information
A chart, a photo of the product being sold, a map showing where the office is. Describe what the image contributes, in the context of the page:
<img src="q3-signups.png" alt="Sign-ups rose from 1,200 in July to 3,400 in September.">For a photo of a jacket on a product page, the colour, cut and material are information. The model's smile usually isn't.
Functional images: say what happens
When an image is the only content of a link or a button, its alt text is the name of that control. Describe the action or the destination, not the picture:
<a href="/"><img src="logo.svg" alt="Northwind home"></a>
<button><img src="search.svg" alt="Search"></button>"Magnifying glass" is the classic mistake here. Nobody wants to activate a magnifying glass.
Images of text: say the text
If the image shows words (a banner, a quote card, a scanned sign), the alt text is those words. Better still, use real text styled with CSS, which also stays sharp when people zoom (WCAG 1.4.5).
Complex images: short alt, long description nearby
A detailed diagram or a dense chart won't fit in one sentence. Give a short alt that identifies it, and put the full explanation in the page, for example a data table or a paragraph right below:
<figure>
<img src="org-chart.png" alt="Organisation chart; described below.">
<figcaption>The CEO leads three directors: Finance, Product and Operations...</figcaption>
</figure>Things to avoid
- Starting with "Image of" or "Picture of". Screen readers already announce that it's an image.
- File names, camera names and SEO keyword lists.
- Repeating the text of an adjacent link or caption word for word. The user hears the same thing twice.
- An empty alt on the only content of a link. The link then has no name at all.
What a scanner can and can't do here
A scanner can find missing alt attributes, images that are the only content of a link with empty alt, SVG icons with no accessible name, and alt text that looks like a file name or repeats the nearby text. AccessiSight checks all of these. What no scanner can do reliably is tell you whether "Team photo" is enough for your "About us" page. That is an editorial decision, and it is the part worth spending a few minutes on.
The W3C's alt decision tree walks through the same choices step by step, and the Understanding 1.1.1 document covers the edge cases.