A product image may take seconds to upload, but the text behind it can decide whether someone understands your page at all. Learning how to write alt text helps screen-reader users access visual information, gives search engines useful context, and makes your content clearer when an image does not load.
Alt text is not a place to add a string of keywords or repeat a caption. It is a short, purposeful description of what an image communicates in its specific location. The best version is accurate, useful and quick to understand.
What alt text does
Alternative text, usually called alt text, is written in an image’s `alt` attribute. Screen readers announce it to people who cannot see the image. It can also appear when a file fails to load, which gives visitors context rather than a blank space.
For site owners, bloggers, students and small businesses, it has another practical benefit: it helps search engines understand the relationship between an image and the surrounding page. That can support image search visibility, but accessibility comes first. If you write for people, the SEO value follows naturally.
Here is the key idea: alt text should communicate the image’s purpose, not simply list everything visible in it.
A photo of a woman using a laptop could be described in many ways. On an article about remote work, “Freelancer working on a laptop at a kitchen table” is useful. On a page selling the laptop, “Silver 14-inch laptop open beside a coffee mug” may be more relevant. The image is the same; its job on the page is different.
How to write alt text in five practical steps
1. Check whether the image adds meaning
Start by asking one question: if this image disappeared, would the reader miss information?
If the answer is yes, write alt text. Product photos, charts, instructional screenshots, team photographs, infographics and buttons usually need it. If the image is purely decorative, such as a background flourish or divider, it should normally use empty alt text: `alt=””`. This tells screen readers to skip it.
Do not leave an alt attribute out completely. A missing attribute can cause a screen reader to announce an unhelpful file name, such as `IMG_8472.jpg`.
2. Describe the useful detail first
Write the detail that matters most before anything else. Aim for a clear phrase or sentence rather than a full visual inventory.
For example, weak alt text for a bakery photo might be: “cake”. It identifies the subject but gives little value. “Three-tier white wedding cake decorated with pink flowers” gives a reader the meaningful visual information.
There is no perfect character limit. Short alt text is usually easier to scan, and around 125 characters is a sensible target for simple images. However, do not cut essential context just to hit a number. A technical diagram may need a little more explanation, while a simple icon may need only one or two words.
3. Include context, not filler
Avoid starting with “image of”, “photo of” or “picture of”. Screen readers already tell the user that it is an image, so those words waste time.
Instead of “Image of a man holding a phone”, write “Man comparing mobile phone prices on a shop website”. The second option explains what is happening and why it may matter on the page.
Context also prevents vague wording. A screenshot in a tutorial should state the result or action shown, not merely say “dashboard screenshot”. For example: “PDF merge tool showing three uploaded files ready to combine.” That description helps a visitor follow the task even if they cannot see the interface.
4. Add text that appears inside the image
If an image contains words that are necessary to understand it, include those words in the alt text. This is particularly relevant for promotional graphics, social posts, banners and screenshots.
Suppose a sale banner reads “50% off selected running shoes until Sunday”. Alt text such as “Blue trainers on a sale banner” misses the main message. A better option is “50% off selected running shoes until Sunday”.
Do not duplicate nearby copy without a reason. If the same offer is written as regular text directly beside the image, the alt text can be shorter or the image may be decorative. Repeating every word creates unnecessary noise for screen-reader users.
5. Keep keywords natural
A relevant keyword can belong in alt text when it truthfully describes the picture. It should never be forced in repeatedly.
For a page about resizing photographs, “Before-and-after comparison of a resized landscape photograph” is useful. “Resize image tool, image resizer, resize photo online, free image resize” is not alt text. It is keyword stuffing, and it does not help visitors.
Use plain language. Describe what is there, mention the product, action or outcome where relevant, and stop when the message is clear.
Alt text examples you can use as a model
The quickest way to improve is to compare a generic description with one that carries useful information.
| Image type | Weak alt text | Better alt text | | — | — | — | | Product photo | “Headphones” | “Black wireless over-ear headphones with padded earcups” | | Blog image | “Office” | “Small business owner reviewing invoices at a desk” | | Button icon | “Arrow” | “Download PDF” | | Screenshot | “Tool screenshot” | “Image converter with PNG selected as the output format” | | Chart | “Sales chart” | “Bar chart showing monthly sales rising from January to June” |
The better example is not always longer. It is simply more connected to the user’s task.
Special cases that need more care
Charts, graphs and infographics
A chart often contains data that cannot fit comfortably into one short alt attribute. Give the main takeaway in the alt text, then provide the full data or explanation in nearby page text, a table or a longer description.
For instance, alt text could say: “Line graph showing customer enquiries increasing by 40% between January and June.” The article or page should then state the values, dates and any important interpretation. Do not hide essential information inside an image alone.
Linked images and buttons
When an image is clickable, describe the destination or action, not its appearance. An icon that opens a contact form should use alt text such as “Contact us”, not “Envelope icon”. A logo that links back to the home page can use the company name followed by “home page” if that adds clarity.
Images of text
Whenever possible, use real text in HTML rather than placing essential words inside an image. Real text is easier to read, search, resize and translate. When an image of text is unavoidable, make sure the alt text includes the words people need.
Decorative images
Decorative images should be ignored by assistive technology with `alt=””`. Do not write “decorative border”, “blue background” or “spacer image”. Those descriptions interrupt the reading experience without adding value.
This can feel counter-intuitive at first. Accessibility is not about describing every pixel. It is about giving users equivalent access to the information and function that matter.
Common alt text mistakes to avoid
The most frequent mistake is treating alt text as an SEO field rather than user-facing content. Repeating a target phrase, naming colours with no purpose, or adding marketing claims makes pages harder to use.
Another mistake is relying on automatic descriptions without reviewing them. AI tools can help create a first draft, especially when managing many images, but they may miss brand names, product details, emotional context or the point of a screenshot. A quick human check is worth the time.
Also avoid copying the file name. Before uploading, rename files clearly for your own organisation, but do not assume a file name provides accessible alt text. `summer-sale-final-v3.png` tells a visitor almost nothing.
A fast quality check before you publish
Read the alt text without looking at the image. Would someone understand the same key message? Then read it alongside the heading, caption and surrounding paragraph. If it repeats information word for word, shorten it. If it adds a missing detail, keep it.
For ecommerce images, check that the description distinguishes products where needed, such as colour, size, material or style. For editorial content, check that it explains the action or message. For tool screenshots, check that it tells users what they should notice or do next.
Good alt text is a small part of publishing, but it has a practical effect: more people can use your content without needing to see every image. Make it part of your upload routine, just like checking image size, file format and page copy, and each new page becomes easier for every visitor to understand.