Remove the picture from a page and read what is left. If a piece of information just vanished, that is what the alt text has to put back. If nothing is missing, the image was decorative and the alt text has a different job. That single test settles most alt text decisions, and it is a more reliable guide than any keyword rule.
Alt text is the short description written into the alt attribute of an <img> tag. It does one job for three audiences: a screen reader reads it aloud when it reaches the image, the browser shows it when the file fails to load, and a search engine reads it as part of what tells it the image is about. That triple duty is why treating alt text as an SEO box to fill is the wrong frame. It is a writing task before it is anything else.
Imagine the page without the image #
The clearest way to write good alt text is to picture the page with the image stripped out and ask what information disappeared. That missing piece is what the alt text restores.
A product page shows a photo of a black running shoe with white stripes. With the image gone, the reader still knows a shoe is for sale, but the specifics are lost. “Nike Air Zoom Pegasus 40 in black with white stripes” restores what the photo contributed; “Running shoe” does not. A productivity post carries a stock photo of someone at a laptop with a coffee. Remove it and nothing essential is gone, because the photo was decorative, so its alt text should not describe it at all.
That is the substitutability test: if removing the image loses something the reader needs, the alt text supplies it; if it loses nothing, the image is decorative. Context decides the wording, not the picture alone. Google’s technical writing guidance frames alt text as context dependent, so the same photograph can warrant different text depending on what the page is about. The flip side is not over-describing. Cataloging color and composition the way an art catalog does misses the point, because the alt text is not recreating the visual experience; it is restoring the information a reader who cannot see the image would miss. A chart does not need “a bar chart with four blue bars of increasing height”; it needs “Quarterly revenue grew from $4M in Q1 to $9M in Q4.” Sized to the role the image plays, no larger.
The writing mechanics #
Five rules cover the practical guidance.
Keep it short. WCAG sets no character limit; success criterion 1.1.1 only requires that the text alternative serve the same purpose as the image. Most accessibility guidance settles on roughly 125 characters as a working upper bound. That number traces to older JAWS behavior, which split alt text into 125-character chunks rather than truncating it; modern screen readers differ, but the convention keeps alt text coherent across the widest range of assistive technology. When an image needs more, use short alt with the detail placed elsewhere on the page.
Skip the setup. Do not open with “Image of” or “Photo of.” A screen reader announces “image” or “graphic” first, so “Image of a chickadee” becomes “graphic, image of a chickadee,” a redundant double announcement. Start with the subject.
Be specific. “Dog” is weaker than “black Labrador retriever puppy”; “Chart” is weaker than “Revenue grew 40% year over year.” The specificity is the information the alt text exists to carry, not padding.
Skip duplicate text. If a caption or adjacent paragraph already describes the image in full, do not restate it, or a screen reader user hears the same content twice. Reduce the alt text to a brief identifier instead.
End with a period. Screen readers pause at periods, putting a small break between the alt text and the body text that follows. It also reads better declarative than narrative: “A chickadee perches on a snowy branch” is alt text; “We can see a chickadee that is perching” sounds like the page narrating itself.
Different jobs, different alt strategies #
Not every image does the same job, and the right approach depends on which kind it is.
| Image type | What it does | Alt text approach |
|---|---|---|
| Informational | Adds meaning the surrounding text does not fully cover | Describe the information the image contributes |
| Decorative | Adds visual texture without information | Empty alt attribute (<!–INLINECODE2–>) |
| Functional | Acts as a link or button | Describe the action or destination, not the image |
| Complex (chart, infographic, diagram) | Carries data the text does not restate | Summarize the takeaway; put detail in body text or a longer description |
| Text-in-image | Reproduces text shown inside the image | Transcribe the text exactly |
Functional images shift the rule. When an image is itself the link, Google uses its alt text as the link’s anchor text. A magnifying-glass icon that opens a search box should not read “Magnifying glass”; it should read “Search,” which is what the link does. Complex images cannot be handled by alt text alone: a chart with a dozen data points will not fit in 125 characters, so the pattern is short alt naming the takeaway (“Revenue grew sharply after Q2, then plateaued”) with the granular data in body text or a linked data table. And when an image is purely text, a logo or a labeled diagram, the alt text reproduces the words the sighted reader sees.
Decorative images and the empty alt attribute #
Some images are purely decorative: texture, mood, page rhythm, carrying no information a sighted reader extracts. For these, alt text is not meant to describe them but to mark them skippable, and the mechanism is the empty alt attribute:
<img src="decorative-flourish.jpg" alt="">Two details matter. The alt attribute is present, so the image is not missing it; it has an empty value. And there is nothing between the quotes, not even a space. Assistive technology that meets alt="" treats the image as decorative and skips announcing it. This is not the same as omitting the attribute: WCAG guidance is explicit that it must be present and empty, because leaving it off entirely can lead some screen readers to read the filename or handle the image unpredictably.
Describing a decorative image anyway is the wrong move. A screen reader user reaches the image entirely through the alt text, so on a long page dozens of decorative images with descriptive alt text become a stream of announcements cutting across the real content; the empty alt keeps that noise out. The same logic reaches link lists, where an image link’s alt text appears in the screen reader’s index of page links: five image links labeled “Image” give five useless entries, while “Search,” “Account,” “Cart,” “Help” give a usable one. Decorative is a narrower category than it sounds, though. The test is not “is this just a picture” but “does the image carry information the page needs,” and a workflow diagram on a process post is informational even when generic. ARIA labels are a separate layer that can override alt text for interactive widgets, but for most images the alt attribute is the right control.
Captions, titles, and filenames are not substitutes #
Alt text is not the only text tied to an image, and the others do different jobs. A caption is visible to everyone, so caption and alt text should not repeat each other, or a screen reader user hears the line twice; if the caption reads “Quarterly revenue grew from $4M to $9M,” the alt text can just name the image (“Revenue chart”). The title attribute shows a tooltip on hover for sighted mouse users only and is not reliable for accessibility. And a filename is a weak signal that Google reads: descriptive names with hyphens as word separators (nike-pegasus-40-black.jpg over IMG_4729.jpg) help image understanding, but far less than alt text, and never in place of it.
How Google reads pictures through alt text #
For search engines, alt text is one of several inputs explaining what an image is about. Google’s Search Central documentation calls it the most important attribute for image metadata, read alongside computer vision and the surrounding page content. The effect lands in two places. Google Images surfaces results partly on alt text, so a site with descriptive, accurate alt text on its product photos can appear when someone searches for those products, while a site with generic alt text is far less likely to. And alt text counts as part of the page’s text content, contributing to its topical signal the same lightweight way anchor text and URL words do. This is not a major ranking lever, but it is a real contribution.
The mistake here is treating alt text as a keyword field. Google’s own documentation uses a keyword-stuffed example as what not to do, an alt value crammed with “puppy dog baby dog pup pups puppies doggies pups litter,” and warns that filling alt attributes with keywords can get a site treated as spam. Modern computer vision can already identify a puppy in an image; what it cannot do, and what alt text is for, is know what the image means in the context of this page. Multimodal systems such as AI Overviews draw on alt text too, mixed with surrounding content and computer vision, though the weighting is not documented; the reasonable read is that accurate alt text gives them a verified textual handle on the image, worth doing carefully but not something to attach a ranking number to.
Seven alt text anti-patterns #
Most alt text problems on real sites fall into a short set, each with a clean fix.
- Empty alt on informational images. A product photo set to
alt=""to silence an accessibility warning. Fix: if the image carries information, describe it. Empty alt is only for purely visual elements. - “Image of” or “Picture of” prefix. The screen reader already announces a graphic, so the prefix is redundant. Fix: start with the subject.
- Filename as alt text.
alt="IMG_4729", where the CMS auto-populated the field and no one rewrote it. Fix: rewrite every auto-generated value. - Keyword stuffing.
alt="puppy puppies dog dogs cute dog photos best dog breeds", which Google’s documentation calls out directly. Fix: describe the image once, accurately, in plain language. - Alt text identical to the caption. Screen reader users hear the same line twice. Fix: brief alt that names the image; let the caption carry the description.
- Generic alt on product images. A catalog where hundreds of photos all read
alt="product". Fix: write product-specific alt, brand, model, color, key feature. - Missing the alt attribute entirely. Not even
alt="", just<img src="...">. Some screen readers then read the filename or skip the image silently. Fix: every<img>gets an alt attribute, empty for decorative, descriptive for informational.
An eighth worth flagging is alt text that describes the wrong meaning. A photo of two people shaking hands on a page about contract negotiations does not need “two people shaking hands”; it needs “executives signing a partnership agreement,” or whatever the image communicates in context. The literal description is accurate; the contextual one is correct.
FAQ #
Should every image have alt text?
Every <img> should have an alt attribute. Informational images get a description; decorative ones get an empty value, alt="". Omitting the attribute entirely is the case to avoid.
What is the difference between alt text and a title attribute?
Alt text is the accessible description read by screen readers and used as a fallback and a search signal. The title attribute shows a tooltip on hover for sighted mouse users and is not reliable for accessibility. It is not a substitute for alt text.
How do I handle a chart or infographic?
Give it short alt text stating the takeaway, then put the underlying numbers in the body text or a linked data table. One line of alt cannot carry a dozen data points, and it should not try to.
The work is mostly editorial. Look at the image, decide whether it is informational, decorative, or functional, then write what it contributes, in context, in one sentence, without “image of,” ending with a period. Decorative images get an empty alt; complex ones get a short summary with the detail elsewhere. None of this needs special tooling. What it needs is treating the field as a writing task rather than a checkbox to silence a warning or a bucket to pack with keywords. It is the words the page says when the picture is not there.