How to Write Alt Text: Rules, Examples, and Common Mistakes

What is alt text?

Alt text is the value of the alt attribute on an image element, as in <img src="mountain.jpg" alt="Snow-capped mountain at sunrise">. WebAIM explains that it serves three purposes: it lets screen readers announce what an image shows to people with visual disabilities, it displays when an image fails to load, and it helps search engines assess what a page is about.

WebAIM makes a point that explains why people, not software, must write it: algorithms alone cannot understand what an image means within the context of the overall page. Good alt text is a short piece of editing, not a caption generated from the picture.

First, decide whether the image needs a description

Not every image needs the same treatment, and the W3C's alt text decision tree is the quickest way to choose. It walks through five questions in order.

• Does the image contain text? If so, work out what the text is for: whether it repeats nearby content, is decorative, is functional, or carries unique information.
• Is the image used in a link or button where it is essential to understanding? If so, describe the link's destination or the action it triggers.
• Does the image contribute meaning to the page? If so, decide whether it is a simple graphic or photograph, a complex piece of information, or something already described elsewhere.
• Is it purely decorative or not meant for users? If so, use an empty alt attribute.
• Is it none of these, or unclear? Consult the full W3C Images Tutorial.

Informative images

For a photograph or simple graphic that adds meaning, the W3C says to use a brief description that conveys that meaning in the alt attribute. Describe what matters in this context, not every visible detail.

Google's own image guidance uses a model example: Dalmatian puppy playing fetch. It names the subject and the action in a handful of words. Compare that with a vague label such as dog.jpg, or an over-long sentence listing every color and object.

Decorative images

Decorative images, such as a stylistic divider or a background flourish, add no information. WebAIM's advice is that decorative images should have an empty alt attribute, written as alt with two quotation marks and nothing between them. The W3C gives the same instruction. Screen readers skip an image with empty alt text, so users are not forced to listen to meaningless descriptions.

Keep the attribute present but empty rather than leaving it out. Without any alt attribute, a screen reader may announce the file name instead, which is worse than silence.

Functional images: links, buttons, and icons

When an image does something, the alt text should say what it does, not what it looks like. The W3C says to use the alt attribute to communicate the function of the image. WebAIM adds that when an image is the only content of a link, the alt text must convey the link's purpose, because the screen reader has nothing else to go on.

A magnifying glass icon on a search button should have alt text of Search, not magnifying glass. A logo that links to the home page might use the site name followed by home page. If a button already has visible text beside the icon, the icon can usually have an empty alt attribute so the label is not read twice.

Images of text and complex images

If an image contains text that appears nowhere else on the page, the W3C says to include that text in the alt attribute. Better still, use real text styled with CSS, which scales, translates, and can be searched.

Charts, graphs, and infographics hold more information than a short alt can carry. The W3C advises including the information contained in the image elsewhere on the page, and WebAIM recommends giving a short summary in the alt text and pointing to the detail. A bar chart might have alt text such as Bar chart of monthly sign-ups rising from 200 in January to 900 in June, with the full figures in the table below.

How to write good alt text

Once you know an image needs a description, a few habits make it effective.

• Describe the purpose, not just the appearance. Ask what you would say if you were reading the page aloud to someone.
• Be succinct. WebAIM says content and function should be presented as succinctly as possible without sacrificing accuracy, and that typically only a few words are necessary.
• Skip phrases such as image of or graphic of. WebAIM notes that screen readers already announce that it is an image.
• Use context. If the surrounding text already says what the image shows, WebAIM says an empty alt may be all that is needed.
• Include any text that appears in the image if it is not repeated nearby.
• Write in the language of the page and use normal punctuation so it reads naturally aloud.
• Do not stuff keywords. Google says to avoid filling alt attributes with keywords, because it creates a poor experience.

Before and after: alt text examples

The same image can need different alt text depending on how it is used, which is why a one-size-fits-all rule never works. These pairs show common fixes.

• Weak: image of a dog. Better: Dalmatian puppy playing fetch.
• Weak: IMG00023.jpg. Better: Barista pouring milk into a latte at a cafe counter.
• Weak: Click here (for a linked image). Better: Download the 2026 annual report.
• Weak: chart. Better: Line chart showing website visits doubling between March and June.
• Weak: best cheap running shoes buy running shoes online. Better: Blue trail running shoes on a gravel path.
• Weak: a long paragraph describing every detail of a decorative swirl. Better: an empty alt attribute.

Alt text and SEO

Alt text is written for people first, but it also helps search engines understand images. Google recommends useful, information-rich content that uses keywords appropriately and warns against stuffing the attribute with keywords. Its example, Dalmatian puppy playing fetch, is descriptive without being repetitive.

Google also recommends descriptive, concise file names, such as my-new-black-kitten.jpg instead of IMG00023.JPG, and notes that standard HTML image elements help its crawlers find and process images. It supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF, and it does not index CSS background images, so an image that matters for search should be a real image element with alt text.

How to review alt text on your own site

Automated checkers can tell you whether an alt attribute exists, but WebAIM's point about meaning applies here too: software cannot judge whether the text is accurate or useful. A short manual review catches what tools miss.

Start by listing every image on a page and deciding which of the five W3C categories it belongs to. Then check each one against the rules above. For a realistic test, listen to the page with a screen reader, such as the free NVDA on Windows or the built-in VoiceOver on Apple devices, and note every place the reading feels repetitive, confusing, or silent.

• Search your page source for img elements with no alt attribute at all, and fix those first.
• Look for generic values such as image, photo, or a file name, and replace them with real descriptions.
• Check linked images by reading only the alt text and asking whether you would know where the link goes.
• Check decorative images and make sure they have an empty alt attribute, not a description.
• Re-read each description in the context of the paragraph around it, and delete anything that merely repeats nearby text.

Common alt text mistakes

Most alt text problems fall into a few repeating patterns, and an audit can catch them quickly.

• Leaving the alt attribute off entirely, so a screen reader may read the file name.
• Using the same alt text for every image on a page.
• Starting with image of, picture of, or graphic of.
• Stuffing keywords to try to rank rather than to describe.
• Describing purely decorative images at length, which makes the page noisier for screen reader users.
• Putting essential information only inside an image, with no text equivalent elsewhere.
• Giving linked images descriptions of how they look instead of where they go.