Here is how to write alt text in one line: decide what job the image does on this page, then write the shortest plain sentence that does the same job in words. For a link or button that means naming its destination or its action; for a photo it means the details a reader would miss; for decoration it means writing nothing at all.
This guide covers the method plus the rules on sizing, context, punctuation and omissions. When you want to see the rules applied, the alt text examples page shows weak and better versions for every common image type.
Quick facts
First question
What would a reader miss if this image vanished?Length
One or two short sentences; about 125 characters is a soft targetHard limit in HTML
None, but long alt text is hard to listen toSkip
"Image of", file names, keywords, repeats of nearby textLinks and buttons
Describe the destination or action, not the pictureLong content
Charts and infographics: short alt plus full text on the page
How to write alt text in five steps
- Name the job. Is the image informative, functional (a link or button), an image of text, a chart or diagram, or decoration? The job decides the answer more than the picture does.
- Look at what is already said. If the caption or the next sentence already describes the image, the alt only needs what is missing, and sometimes nothing.
- Choose the details. Ask what a sighted reader takes from the image on this page: a color on a product page, an action in a news photo, a trend in a chart.
- Write it plainly. One sentence, ordinary words, most important idea first.
- Trim and test. Cut anything that does not help, then read it aloud in place. If it sounds odd in the flow of the page, rewrite it.
If the image is decorative, stop at step 1 and use alt="". If you are stuck on the job, the W3C's decision tree for alt attributes resolves most cases.
Start from purpose and context
The same picture can need different alt text on different pages, and that is the heart of the skill. Context includes the page topic, the paragraph beside the image, and who is reading.
- Purpose over appearance. For anything that is clicked or tapped, the alt names the outcome. Appearance only matters when it is the information.
- Specific over general. "Dog" is rarely enough on a page about dogs; "Beagle puppy asleep on a blue blanket" might be.
- Relevant over complete. You are not cataloguing the photo. Leave out details the page does not care about.
- Same words as any visible text. When an image contains words, those words are the alt text.
Ask the person who chose the image why it is there. Their answer is usually the alt text, or very close to it.
Alt text character limit and ideal length
HTML sets no character limit on the alt attribute. The common advice to aim for about 125 characters is a style target, not a rule of the standard. It keeps descriptions to one or two short sentences, which is about what a listener can take in without losing the thread of the page.
| Image type | Typical length | Where extra detail goes |
|---|---|---|
| Icon, button or linked image | One to four words | Nowhere; the action is enough |
| Photo | 5 to 20 words | A visible caption, if the detail helps everyone |
| Image of text | Same as the text shown | If the text is long, put it on the page as real text |
| Chart or diagram | One sentence with the main point | A data table or paragraph right after the image |
| Infographic or map | A short title and summary | A full text version on the page or a linked page |
Some platforms set their own maximums for image descriptions, and these change between versions. If a tool cuts you off, that is a sign the detail belongs in the post or page itself.
Alt text best practices at a glance
| Do | Avoid |
|---|---|
| Put the key word first: "Map of delivery zones" | Opening with filler: "This is a picture that shows a map" |
| Write in sentence case and end with a full stop | Whole words in upper case, which can be read out letter by letter |
| Use the words people use for the thing | Jargon, internal product codes, unexplained abbreviations |
| Mention color, size or setting only when they matter here | Listing every object in the frame |
| Keep each image's alt unique to what it shows | Copying one alt onto every photo in a gallery |
| Say "screenshot", "illustration" or "painting" when the medium matters | "Image of" or "picture of", which the screen reader already announces |
Teams that publish a lot should turn these into short in house alt text guidelines with a few approved patterns for their own common image types, such as products, staff photos and charts.
Punctuation, numbers and special characters
- End with a full stop. It gives a natural pause before the screen reader moves on to the next text.
- Use commas for lists of two or three items. More than that suggests the detail belongs on the page.
- Write numbers as digits with units: "750 ml", "4.5 stars out of 5". Spell out symbols that may be skipped, such as "percent" for the sign, if the number matters.
- Quotation marks inside alt text must be escaped in HTML as
", or swapped for single quotes, or they will end the attribute early. - Avoid emoji and decorative symbols. Screen readers read their full names, which can be long and confusing.
- Do not use line breaks or bullet characters; alt text is read as a single run.
What to leave out
A lot of good alt text writing is deleting. Remove these before you publish:
- "Image of", "photo of", "graphic of". Redundant, since the image role is announced.
- File names and sizes. "hero_banner_final_v2.png" means nothing to a listener.
- Anything the caption or nearby text already says. Hearing it twice wastes time.
- Credits and copyright lines. Put photographer credits in a visible caption.
- Instructions such as "click to enlarge". If the image opens a larger view, describe that as the link's purpose.
- Keyword lists. They make descriptions longer and worse; see alt text and SEO for how search engines treat them.
- Guesses about people. Do not assume someone's age, gender, ethnicity, disability or feelings. Stay with what can be seen and what the page needs, and name people only where the page does.
Empty alt is not "lazy alt". For a purely decorative image, alt="" is the correct, finished answer. Leaving out the attribute is the mistake.
Checking your alt text before it goes live
A short review catches most problems:
- Read the alt aloud with the paragraph before and after it. Does the page still make sense without the image?
- Cover the image and ask a colleague what they now know. Is anything important missing?
- For linked images, ask: does the alt say where I will end up?
- Paste the page HTML into the alt text checker so missing alt, file names and repeats show up.
- Listen to a few key pages with a screen reader at least once; it changes how you write.
When you have a backlog, the alt text generator can draft text from your answers. Then add it in your platform using these steps for each tool.
Questions people ask
What is the alt text character limit?
HTML has no limit. About 125 characters is a common soft target because it keeps descriptions to one or two sentences. Some apps set their own maximums, so check the tool you publish with.
How do I write alt text for images with text in them?
Use the same words the image shows, and nothing more unless the design adds meaning. If the text is long, put it on the page as real text and keep the alt short.
Should alt text be a full sentence?
It does not need to be grammatically complete, but it should read naturally and usually end with a full stop. Short phrases work well for buttons and links, such as "Print invoice".
What are the main alt text guidelines?
Base it on the image's purpose, keep it short and specific, do not start with image of, skip anything nearby text already says, and use empty alt for decoration. WCAG success criterion 1.1.1 is the rule behind all of this.
How do I create alt text for images in bulk?
Group images by type, agree a pattern for each type, and write the important pages first. Drafting tools can speed this up, but a person who knows the page should check every result.