MotionShineShort answer: Write what the picture tells the reader on this page, in a few words, and stop. Leave out "image of", because screen readers already say it is an image. If the picture only decorates, use an empty alt (alt="") so it is skipped. If the picture is a link or a button, say where it goes or what it does. If it shows words, the alt text holds those words. That is the core of the WebAIM and W3C advice, both read on 7 November 2026.
To write a first draft for a whole folder of pictures, the free alt text generator does it in your browser with no upload. Its page says to read every line yourself, and this post explains what to look for.
Where the rules in this post come from
| Source | What it is | Date on the page | Read on |
|---|---|---|---|
| WebAIM: Alternative Text | Guide by WebAIM, a web accessibility group | Updated 19 October 2021 | 7 November 2026 |
| W3C WAI: Images Tutorial | The W3C Web Accessibility Initiative's tutorial | Updated 8 April 2026 | 7 November 2026 |
| W3C WAI: An alt Decision Tree | Five questions that pick the right kind of alt | Updated 13 May 2024 | 7 November 2026 |
| Google Search Central: Image SEO | Google's advice on images in search | No date shown | 7 November 2026 |
Anything in this post that is not from these pages is marked as general advice.
What alt text is for
Alt text, or alternative text, is the alt attribute of an image. A screen reader speaks it. A browser shows it when the picture does not load. Google's image page says Google uses it, together with the page and what it sees in the picture, to understand what the image is about.
So the job is simple to say and easy to get wrong: give someone who cannot see the picture what a sighted reader gets from it, on this page.
How to write alt text in 5 steps
- Ask why the picture is there. WebAIM puts it as a question: if you could not use this image, what would you put in its place? That answer is your alt text. If the answer is "nothing", the alt is empty.
- Check what the text next to it already says. WebAIM says alt text should not repeat the text near the image. If the caption names the person, the alt does not have to.
- Write the point, not every detail. WebAIM: "Typically, only a few words are necessary." The W3C tutorial asks for at least a short description of the essential information.
- Cut the filler. Drop "image of", "picture of" and "graphic of". WebAIM says screen readers already announce an image. Drop "click here" and "link to" on linked images too.
- Read it aloud. If it sounds like a list of tags, rewrite it as a short phrase. (General advice.)
What kind of picture is it?
The W3C tutorial sorts images into types. The type decides the alt.
| Type | What the W3C tutorial says | Alt text to write |
|---|---|---|
| Informative | A short description of the essential information | The point the picture makes |
| Decorative | Provide a null text alternative | alt="" |
| Functional (a link or button) | Describe what it does, not how it looks | The action or the destination |
| Image of text | Avoid text in images, except logos; the alt holds the same words | The words in the picture |
| Complex (chart, map, diagram) | Give a full text equivalent of the data | A short alt, plus the data in the page or on a linked page |
| Group of images | One alt that covers the whole group | Alt on one image, empty on the rest |
The decision tree on the W3C site asks the same things in order: does the image contain text, is it a link or a button, does it add meaning, is it purely decorative.
10 bad and good alt text examples
These ten examples are made up for this post, to show the rules above. They are not from a real site and they are not quotes.
| # | The picture and the page | Bad alt | Better alt | Why |
|---|---|---|---|---|
| 1 | A product photo of a blue backpack on a shop page | image of backpack | Blue canvas backpack with two front pockets | Drop "image of", say what a buyer needs |
| 2 | A search icon that is the only content of a button | magnifying glass | Search | A button says what it does |
| 3 | The logo in the site header, linking home | logo | Brightside Bakery home | A linked logo says where it goes |
| 4 | A thin line between two sections | decorative line divider | alt="" | Pure decoration is skipped |
| 5 | A team photo, with the names in the caption below | Photo of Ana, Ben and Chris smiling in the office | alt="", or The team at the spring offsite | The caption already names them |
| 6 | A bar chart of sales by month in a report | chart | Bar chart of monthly sales, highest in March plus the numbers in a table under it | Complex images need the data in text |
| 7 | A screenshot of an error box in a help article | screenshot | Error box that reads: File could not be saved | An image of text holds its words |
| 8 | A banner with the words "50% off all mugs" | sale banner | 50% off all mugs | Same words as the picture |
| 9 | A stock photo of a laptop on a blog post about passwords | laptop computer keyboard password security online safety | alt="" | Keyword lists are spam; the photo adds nothing |
| 10 | A step in a tutorial: the Share menu open on a Mac | Mac menu | The Share menu open, with Export highlighted | Say what the reader must find |
Example 9 shows two rules at once. Google's image page warns against "filling alt attributes with keywords", and the W3C tutorial says a picture that adds nothing should have an empty alt.
Example 5 is a judgement call. WebAIM uses a similar case: the same photo can need real alt text on one page and an empty alt on another, because the text next to it changes.
How long should alt text be?
Neither WebAIM nor the W3C tutorial gives a character limit. WebAIM says a few words are typical and a short sentence or two is rare. The figure of 125 characters that many guides quote is a rule of thumb, not a rule from either page. If a picture needs more than a sentence, it is probably a complex image: keep the alt short and put the detail in the page.
When to leave alt text empty
Use alt="" when the picture only decorates or when the text next to it already says everything the picture shows. WebAIM says every image should have an alt attribute, even an empty one. An empty alt is not the same as no alt: with no alt at all, some screen readers read the file name instead. (That last point is general knowledge, not from the pages above.)
Never leave alt empty on a picture that is the only thing inside a link or button. WebAIM says empty alt text would never be appropriate there, because the link would have no name.
How to add alt text to an image
In HTML, put it in the alt attribute: <img src="backpack.jpg" alt="Blue canvas backpack with two front pockets">. For a decorative picture, keep the attribute and leave it empty: <img src="divider.png" alt="">.
In Markdown, it goes in the square brackets: .
In a site builder or a social app, look for a field called alt text or alternative text in the image settings. Instagram's help page on reels, for example, lists "add alternate text" among the options on the last screen before you share. Field names change between apps and versions, so check that app's help page.
For many pictures at once, drop them in the alt text generator. It writes a short or a longer draft for each one, can set an empty alt for decorative pictures, and gives you the img tags or a CSV with the file name and the alt text. Its page is open about the limits: the model sees the picture, not your page, so it cannot know a name, a price or why the picture is there. Use the steps above to fix each line.
Alt text for screenshots in tutorials
If you write help articles or tutorials, most of your pictures are screenshots. Treat each one by its job:
- A screenshot that shows where to click: say what is open and what to find, like example 10.
- A screenshot of an error or a message: copy the words, like example 7.
- A screenshot that repeats the step text exactly: the alt can be short, because the text already says it.
Crop screenshots to the part that matters before you describe them, so the alt can stay short. See how to crop a screenshot on Mac, and how to blur text in a screenshot for private details. The alt text should not repeat what you blurred.
MotionShine is a free Mac screen recorder made by the author of this blog. If your tutorial is a video rather than pictures, alt text does not apply, but captions do: MotionShine can add captions on your Mac. Free exports go up to 720p at 30 fps with no watermark and no time limit, and Pro unlocks 1080p, 1440p, 4K and 60 fps. You do not need it to write alt text.
FAQ
What is a good example of alt text?
For a shop photo, "Blue canvas backpack with two front pockets" is good: short, specific and useful to a buyer. "Image of backpack" is weak, because "image of" is filler and "backpack" alone says too little.
Should alt text start with "image of"?
No. WebAIM says to leave out phrases like "image of" or "graphic of", because screen readers already announce that it is an image. Name the type only when it matters, for example "Oil painting of a harbour" on a page about art. That last case is general advice.
Is there a character limit for alt text?
Not in the WebAIM or W3C pages read on 7 November 2026. Both ask for short text. The 125 character figure is a common rule of thumb. Some apps set their own limit for their alt field, so check the app.
Do decorative images need alt text?
They need an alt attribute that is empty, written alt="". That tells screen readers to skip the picture. The W3C tutorial calls it a null text alternative.
Does alt text help SEO?
Google's image page says Google uses alt text, with the page content, to understand what an image is about, and it warns against stuffing alt text with keywords. Write it for people first; a clear description is also what search engines read.
Can AI write alt text for me?
It can write a first draft, and the alt text generator does that in your browser. A model only sees the picture, so it cannot know names, the page or why the picture is there. Read and fix every line.
