What alt text does
The alt attribute carries a text alternative for an image. Three readers use it. Screen readers speak it to people who cannot see the image. Browsers display it when the image does not load. And Google, in its image guidance, uses alt text together with computer vision to understand the subject of an image, treats it as the anchor text when the image is a link, and calls it the most important metadata attribute an image has. One sentence serves all three, as long as it describes the image rather than decorating it.
Ask what the image is doing
The W3C Web Accessibility Initiative sorts images by their role on the page, and the role decides the alternative:
| Kind of image | What it is | What the alt should be |
|---|---|---|
| Informative | Conveys content: a product photo, a chart of one fact, a portrait | A short description of what the image shows, as a sentence or phrase |
| Decorative | Only adds visual style: a divider, a background texture, a stock photo next to text that already says it | Empty: alt="" so screen readers skip it |
| Functional | Is a link or a button: a logo that goes home, a magnifier that searches | What it does, not what it looks like: "Search", "Freebiefy home" |
| Image of text | A banner or a quote rendered as pixels | The text itself |
| Complex | A chart, a diagram, a map with many data points | A short alt plus a full text alternative nearby: a table, a list or a paragraph |
| Group | Several images that make one meaning, such as five stars | One alt for the group ("4 out of 5 stars"), empty alt for the rest |
Two rules from that table do most of the work. For decorative images the WAI says to provide a null alternative, alt="", so assistive technology skips them; a missing attribute is not the same thing, because readers then fall back to the file name. For functional images, a logo that links home or an icon that submits a search, the alternative describes the function rather than the picture: "Search", not "magnifying glass".
Google's examples, from bad to best
| Alt text | Verdict | Why |
|---|---|---|
| (none) | Bad | Nothing for screen readers or search |
| puppy dog baby dog pup pups puppies … | Bad | Keyword stuffing; Google says it creates a poor experience and can look like spam |
| puppy | Better | True but thin |
| Dalmatian puppy playing fetch | Best | Specific, short, describes what the picture shows |
The best example is simply an accurate description. Specific nouns and one verb usually do it: the breed, the action, the setting if it matters. There is no need to begin with "image of" or "picture of"; the reader already knows it is an image.
Writing it
- Say what a sighted reader gets from it, in the context of the page. The same photo of a laptop is "laptop on a desk" in a lifestyle article and "15-inch model, silver, lid open" in a product listing.
- Keep it short; a phrase or one sentence. If the image needs a paragraph, it is a complex image: give it a short alt and put the detail in visible text, a table or a list next to it, where everyone benefits.
- Do not repeat the caption. If a visible caption already says it, the alt can be shorter or, for a purely decorative photo, empty.
- Images of text carry the text. A banner that reads "Sale ends Sunday" has that as its alt. Better still, use real text over the image; the add text to image tool is for the cases where the text must be in the pixels, such as social cards, and the image to text tool recovers text from an image you did not make.
- Charts: state the point, not the pixels. "Sales rose from 1.2 to 1.9 million between 2024 and 2026" beats "bar chart with blue bars".
File names, captions and the rest of the page
Google reads more than the alt attribute. It advises file names that are short but descriptive, my-new-black-kitten.jpg rather than IMG00023.JPG, and says to avoid generic names like image1.jpg. It draws on captions and image titles, and on the text around the image, so an image placed next to the paragraph it illustrates is understood better than the same image in a gallery. None of this replaces alt text; it corroborates it. The meta tag generator covers the page-level tags, including the social preview image, and the heading structure checker shows whether the headings around your images give them context.
Checklist before publishing
- Every img has an alt attribute, empty or filled; none is missing.
- Decorative images are empty; informative ones describe; functional ones name the action.
- No alt starts with "image of" and none is a list of keywords.
- Complex images have a full text alternative nearby.
- File names are descriptive, and the image sits next to the text it belongs to. The image compressor keeps the file name when it shrinks the file, so the name you chose survives.
Frequently asked questions
What is alt text?
The alt attribute of an image: a text alternative that screen readers speak and that shows when the image does not load. Google also reads it to understand what the image is about, and uses it as anchor text when the image is a link.
How long should alt text be?
As long as it takes to say what a sighted reader gets from the image, and no longer. Google's examples run from one word ("puppy") to a short phrase ("Dalmatian puppy playing fetch"), which it labels best. For a chart or diagram, keep the alt short and put the detail in text next to the image.
Should every image have alt text?
Every image needs an alt attribute, but not every image needs text in it. The W3C Web Accessibility Initiative says to provide a null alternative, alt="", when an image's only purpose is decoration, so screen readers skip it. Leaving the attribute out entirely makes readers announce the file name instead.
Can I put keywords in alt text for SEO?
Describe the image accurately and the keywords take care of themselves. Google explicitly advises against filling alt attributes with keywords, calls it a poor experience and says it can make a site look like spam. Its best example is simply a precise description.
Does the file name matter too?
Google says to use file names that are short but descriptive, for example my-new-black-kitten.jpg rather than IMG00023.JPG, and to avoid generic names such as image1.jpg. It also reads captions and the text around the image, so place images next to the content they belong to.
Sources
- W3C Web Accessibility Initiative: Images tutorial (the image categories informative, decorative, functional, images of text, complex, groups and image maps; alt="" for decorative images; functional images describe the function; the alt decision tree)
- Google Search Central: Google Images SEO best practices (alt text helps Google understand the image and serves as anchor text; avoid keyword stuffing; the puppy examples; short descriptive file names; captions and surrounding text)