If you publish articles and product pages with images, you have probably wondered how to write alt text that helps people using screen readers and also helps search. This guide covers alt text best practices for the images marketing teams use most: product shots, screenshots, charts, logos, buttons, and decorative graphics. By the end you'll have a simple way to decide what each image needs and a check you can run before you publish.
The short answer is to write alt text for what the image contributes on that specific page, not for every visible detail. Use a brief, accurate description when the image carries meaning, name the action when the image is a button or link, and put a chart's real findings in the page text. Leave the alt attribute empty (alt="") when the image adds nothing beyond the text beside it. Google says it uses alt text along with computer vision and page content to understand images, so clear wording that fits the page works for people and for image search at the same time.
There is one thing to be honest about up front. Nothing in the guidance we reviewed says that a particular alt phrase earns an AI citation, or that ChatGPT, Perplexity, and other tools read alt text the same way Google does. So this guide sticks to what is supported, which is good accessible alt text that also happens to fit how Google reads images.
Before you start: the quick version
You'll go through eight steps. Each one has what to do, how to know you're done, and where people usually go wrong.
- Decide what the image contributes.
- Write a short equivalent for photos and product shots.
- Turn screenshots and instructional diagrams into directions.
- Name the action of image-only buttons and links.
- Give charts a short label plus their findings in text.
- Leave alt empty when the image has nothing new to say.
- Check the phrase against the page and image search.
- Review the final page the way a reader would hear it.
A few terms first, so we mean the same thing. Alt text is the text supplied through an image's alt attribute, and its job is to give people the image's relevant information or function when they can't see it. An empty alt attribute (alt="") is a deliberate choice that tells assistive technology to skip the image. A missing alt attribute is something else entirely, and W3C warns that some screen readers may read out the file name when the attribute is left off. A caption is visible text on the page, and it isn't the same thing as alt text.
It's also worth knowing that alt text sits inside a rule. WCAG success criterion 1.1.1, Non-text Content, is a Level A requirement, and it asks for a text alternative that serves the same purpose as the image, with exceptions such as purely decorative content. Following this guide won't make a whole site conformant, but it puts you on the right footing for the images you control.
1. Decide what the image contributes before typing
Most of the alt text best practices people repeat come down to one habit, which is thinking before typing, and most bad alt text comes from skipping it. So start by looking at the image the way the reader will meet it, together with the heading, the caption, the paragraph around it, and any link or button it belongs to. Then ask one question: if this image disappeared, what would the reader lose?
Put the image into one of these groups: informative, functional, complex, text-bearing, redundant, or decorative. Make the call for each placement, not once for each file in your media library, because the same photo can be informative in one article and decorative in another.
W3C's decision tree gives you an order to follow:
- Is the image the only way to understand a link or button? Name the action or destination.
- Does it contain words the reader needs that aren't available as real text nearby? Supply those words, or put the information in the page text.
- Does it show one simple, distinct thing? Describe that meaning briefly.
- Does it show a lot of data or relationships? Write a short alt identification and give the fuller version in text.
- Is everything it says already in the nearby text, or is it only there for atmosphere? Use
alt="".
Done when: you can say in one sentence why this image is on this page and whether its meaning is already in the text.
Where people go wrong: they call every illustration decorative because it looks decorative, or they write a description for every image just because the CMS has an alt field sitting there. Both come from skipping the question about what the image contributes.
The same sequence is easier to follow as a picture, since each answer sends you down a different branch.
2. Write a short equivalent for photos and product shots
When you think about how to write alt text for an informative photograph or a product shot, start by naming the subject and the one detail that matters for the reader's task. On a product page that could be a visible color, a configuration, a feature you can see, or the product being used. If a product or category term accurately says what's in the picture and fits the page, include it. Don't guess at specifications, materials, benefits, or brand names based on how something looks.
Google's own example shows the progression well. An image with no alt text tells search nothing, puppy is better, and Dalmatian puppy playing fetch is better again, because it says what is actually happening. Specific helps when the specifics are true to the image and useful to the page.
Here are a few made-up examples, so you can see the pattern. They are templates for judgment, not descriptions of real products.
| What the image shows on the page | Weak alt | Better alt |
|---|---|---|
| Product detail with a blue jacket that has a visible hood | Jacket clothes outerwear blue jackets | Blue hooded jacket shown from the front |
| Article comparing two desk finishes | Two desks | Light and dark desk finishes side by side |
| Stock photo used only for mood, beside a full written explanation | Happy people smiling at work | alt="", if it adds nothing new |
Done when: someone hearing the alt text understands why this photo was chosen, and it would sound natural if read aloud between the sentences around it. Nobody should have to sit through a list of background details.
Where people go wrong: Product image says nothing, a string of category words is noise, and describing the lighting doesn't help anyone shop. Watch out for claims the photo can't back up too. If the photo adds nothing beyond the product name and description right next to it, empty alt may be the better call.
3. Turn screenshots and instructional diagrams into directions
A screenshot is usually there to help someone do something, so the alt text should say what the screenshot is showing that matters for the task. For a simple diagram, say the operation instead of describing arrows and colors. W3C's example for a bottle cap diagram is Push the cap down and turn it counter-clockwise (from right to left), which is the instruction itself.
If a screenshot carries more instructions than a short alt can hold, put those instructions in the steps of your article and let the alt text say what the screenshot illustrates. Your written steps should work for a person who never sees the picture. If the screenshot shows a field or a warning that your text doesn't mention, add it to the text.
Say your steps tell readers to select the "Create account" tab. A screenshot of that page might need only a short line identifying the screen, or it might not need alt text at all if it shows nothing the sentence didn't already say. This is only a writing pattern, not a real interface.
Done when: a reader who can't see the screenshot can follow the procedure and knows why the screenshot sits at that point. Any control names you quote should match what is actually on screen.
Where people go wrong: Screenshot of dashboard when the whole point was one particular control, or stuffing every menu label into one long attribute while leaving the procedure out of the article. Never invent a button name or a screen state because that's what a product usually shows.
Pro tip: Write the numbered steps first and the screenshot alt text second. Once the steps are complete, you'll find the alt text gets a lot shorter, because it only has to say what the picture is for.
4. Name the action of image-only buttons and links
When an image is the only thing inside a button or link, the alt text should say what happens when you use it. W3C's examples are Search for a magnifying glass button, Print this page for a print button, and W3C home for a logo that is the only content of a home link. Google also notes that the alt attribute of a linked image can act as anchor text, which is one more reason the destination needs to make sense.
If the link already has visible text saying the same thing, give the icon next to it an empty alt so the screen reader doesn't say it twice. If the icon adds something the text doesn't, like the fact that a link opens in a new window or that a file is a PDF, keep that information.
Logos take a little thought. A standalone logo generally needs the organization's name, not a description of the shape of the mark. For a logo that is the only content of a home link, W3C shows naming the home destination, while WebAIM says the company name alone is often enough because people know the convention. Both agree on the goal, which is that the link's accessible name should tell someone where it goes. So test that name instead of applying one fixed formula.
Done when: you could hear the control without seeing the icon and know what it does, and the spoken text of the link doesn't repeat itself.
Where people go wrong: Magnifying glass instead of Search, or alt="" on the only content of a link that matters. An empty alt on a linked image makes the link disappear for anyone using a screen reader.
5. Give charts a short label and their findings in text
A chart with real data needs two parts. In the alt text, say what kind of chart it is, what it's about, and what it covers. In the text near it, in a table, or in a clearly marked longer description, give the figures, scales, relationships, and trends a reader needs to take away the point.
W3C's own example is a bar chart of monthly and total visitors for three sites in the first quarter of 2025. The short alt text identifies the chart, and the longer description explains what the numbers show, including a decline for the first site, steady values for the second, and growth for the third. How much you reproduce depends on what your article wants readers to learn from the chart. You don't need to transcribe every mark on it. If you're deciding between a table, a list, and prose for the findings, our guide to content formats for AI citations can help you choose.
If the full description needs headings or a table, put it on the page as real content or link to it. W3C cautions that pointing to a description with aria-describedby reads it as one continuous block of text, which is a poor fit when the description has structure. That's a small detail for whoever builds the page, and the main job for you as the writer is to make sure the findings exist in text somewhere a reader can find them.
Done when: someone reading only the text can recover the chart's conclusion and the data behind it, and can find the longer description without guessing.
Where people go wrong: Bar chart and nothing else, or a very long alt attribute that tries to flatten a whole data table, or a confident claim about a trend that the plotted values don't support. Please don't mark a chart decorative just because your paragraph mentions its overall conclusion, since the reader may need the data underneath.
6. Leave alt empty when the image has nothing new to say
An empty alt is a real answer, and it's the right one for a fair number of images. Use alt="" for a decorative border or flourish, a mood photo that carries no information, an icon inside a text link that already says what the link does, or an image whose whole meaning is already in real text next to it. If words appear in an image only for looks, or the same words are already on the page as text, empty alt fits there too. Image-only buttons and links never belong in this group.
Some purely decorative images can also be done as CSS backgrounds where that suits the site, though that's a build decision more than a writing one.
Done when: taking the image away wouldn't change what a reader relying on text can learn or do, and the attribute is present but empty. It should not be missing.
Where people go wrong: writing decorative graphic in place of leaving it empty, which makes a screen reader user listen to something meaningless. Others leave the attribute off completely, or empty the alt on a chart the article still depends on.
Common mistake: An empty alt is not a blank to fill in for SEO. If a graphic adds no information, putting a keyword in its alt attribute turns a deliberate accessibility choice into noise. If you want the keyword on the page, work it into the article's real text.
7. Check the phrase against the page and image search
Now read your candidate alt text in place, between the sentence before the image and the sentence after it. Cut generic phrases, repeated words, "image of" and "graphic of," and any keyword lists. Where a search term truly names what's pictured, use it naturally. That is the whole idea behind image alt text SEO, and it doesn't ask you to write differently for search than you would for a listener.
Google's guidance on image alt text SEO recommends useful, information-rich alt text with appropriate keywords in context, and it warns that keyword stuffing makes for a worse experience and can be treated as spam. It also looks at the text around an image, including captions, so the page copy next to your figure should be useful too. The reader ought to be able to understand why the image matters from the page, and not only from a hidden attribute.
On the AI side, keep your claims small. Google says the SEO fundamentals that already exist apply to AI Overviews and AI Mode, and it names no extra markup, text file, or special optimization for them. Important content should be available as text. To show up as a supporting link, a page has to be indexed and eligible to appear with a snippet, and even then Google says that's no guarantee. None of that says an alt phrase gets you cited, and none of it tells us how ChatGPT or Perplexity treat alt attributes. If you want to go deeper on how AI engines pick what to cite, our guide to writing answer-first content is a good place to start. It pairs well with our piece on why high-ranking pages still miss AI citations.
Done when: the alt gives the same useful fact to a listener and to a search system, without making either one read a list of search terms.
Where people go wrong: treating alt text as hidden metadata for an AEO tactic, or telling a boss it will secure citations. It's a sound practice, and that's the honest way to describe it.
If you also want the page's markup to support what your text says, see how to add schema markup without a developer. Here is where a content platform can help a little. A tool like DeepSmith keeps your product facts, brand voice, and article context in one place through Deep IQ, so the copy around your images stays accurate and consistent as you produce more. What it doesn't do is look at each picture and decide what it contributes on the page. That part stays with you, and it's why the next step exists.
8. Review the final page as a reader would hear it
Do a small review after the layout has settled, meaning the captions, headings, images, and links are all in place. For each image, read the surrounding text and the alt in order, the way a screen reader would. Check whether the alt matches the real image, whether it repeats something already written, whether image-only controls have sensible names, whether complex images have text you can find, and whether decorative images use alt="". Testing with a screen reader, where you can, will show you confusing wording quickly. Look again whenever you reuse the same asset in a new place. If you want to check the rest of the page while you're there, the AEO audit checklist lists the other factors to look at.
This is also a good moment to catch generated or CMS-suggested alt text that nobody looked at. An automated check that a field is filled in can't tell whether the words say the right thing.
Done when: every meaningful image has accessible alt text that fits it, every decorative or fully redundant image has an explicitly empty alt, chart findings exist as text, controls make sense without their icons, and no alt makes a claim the image can't support.
Where people go wrong: publishing whatever wording a tool suggested without opening the image, or testing an alt string on its own instead of in its spot in the page. Checking only that the field isn't empty is the same mistake in a different form.
If you produce articles in DeepSmith, Produced Content is where you review and edit a finished article before you publish it, so it's a natural place to make this check. The review is a human step, and the product brief doesn't claim that cover images, metadata, or publishing integrations write correct alt text for you.
What to do next
Take the next article you're about to publish and go through its images one at a time. For the product image, the screenshot, the decorative graphic, and the chart, run through the decision sequence in step 1, write what each one needs, and then read the final page in context. If you're also tidying up other parts of the page, our AI draft editing checklist pairs well with this one. The AI-citable content publishing checklist covers what to check before a piece goes out. The image side of the question is covered in AI-generated images in blog content. For how all of this fits with search, see what is different about AEO and SEO, or start with our introduction to answer engine optimization.
If you'd like to bring brand context, content production, and review into one workflow while you keep the image-by-image judgment for yourself, you can start a free 7-day DeepSmith trial.
