How to write alt text: a practical guide with examples

What is alt text and who needs it?

Alt text, short for alternative text, goes in the alt attribute of an image. People who are blind or have low vision hear it through a screen reader. It also shows when images are turned off or fail to load, and search engines use it to understand images.

Text alternatives are the first rule in WCAG. Success criterion 1.1.1 asks that all non-text content has a text alternative that serves the same purpose. The key word is purpose: alt text isn't a caption for the image. It replaces the image.

Missing alt text is one of the most common problems on the web. WebAIM's 2026 study of the top one million home pages found missing alt text on 53.1% of them, with 10.8 images per page missing it on average.

Does every image need alt text?

Every image needs an alt attribute, but not every image needs words in it. First decide what job the image does. The W3C's alt decision tree walks you through it.

• Informative images show something the reader needs, like a product, a person or a place. Describe what matters in a short phrase or sentence.
• Decorative images only add style, like background shapes, dividers or stock photos that add no meaning. Use an empty alt attribute: alt="".
• Functional images sit inside a link or button. Describe what happens when you select them, not what the picture looks like.
• Images of text show words. Put the same words in the alt text, or better, use real text.
• Complex images, like charts, maps and diagrams, hold more than a short phrase can say. Give a short alt and a longer description on the page.

If an image repeats text that is already next to it, also use an empty alt, so screen reader users don't hear the same thing twice.

Never leave the alt attribute off. An empty alt (alt="") tells screen readers to skip the image. With no alt at all, some screen readers read out the file name instead, such as "IMG_4032.jpg".

How do you write alt text for links and buttons?

When an image is the only thing inside a link or button, its alt text becomes the name of that link or button. So describe the action or the destination.

• A logo that links to your home page: your company name, or the name plus "home", such as "Acme Plumbing home".
• A magnifying glass button that starts a search: "Search".
• A printer icon that prints the page: "Print this page".
• A cart icon that opens the shopping cart: "View cart".

If the link already has visible text next to the image, such as an envelope icon beside the words "Contact us", give the icon an empty alt so screen readers don't say it twice.

How do you describe charts, graphs and complex images?

A chart can hold dozens of facts, which is too much for alt text. Use two parts:

1. A short alt text that names the image, such as "Bar chart of monthly sales in 2025".
2. A longer description on the page that gives the key facts or the full data.

Put the long description where everyone can find it: in the text next to the chart, in a caption, in a data table below it or on a linked page. A data table often works best, because sighted readers can use it too. If the chart's main message is "Sales doubled in June", say that in the text.

What does good alt text look like?

Context decides what to write. A photo of a dog on a pet shop page might be about the collar it's wearing, while the same photo on a news story might be about the dog. Describe what matters on that page.

Common mistakes to avoid:

• Starting with "image of" or "picture of". Screen readers already say it's an image.
• Using the file name, like "hero-banner-final.png".
• Stuffing in keywords for search engines. It makes the page harder to listen to.
• Repeating the caption or nearby text word for word.
• Writing a paragraph. A few words, or a short sentence, is usually enough.
• Giving every image the same alt text, like your company name.
• Putting important words only inside an image, where they can't be resized, restyled or translated.

How do you add alt text on common website platforms?

Most website builders, store platforms and content systems have an alt text field. You usually find it when you select an image in the media library, the image settings or the product media editor. It may be called "Alt text", "Alternative text" or "Image description".

• Check the alt text where the image is used, not just once in the library, if the same image means different things on different pages.
• For product photos, describe what makes each photo different, such as the color or the angle shown.
• In your own HTML, add the alt attribute to the img element, such as alt="Navy wool coat with a hood".
• Images set as CSS backgrounds can't have alt text. If they carry meaning, use a real image or put the information in text.
• Tools that write alt text for you can help with a first draft, but they don't know why you chose the image. Read and edit every suggestion.

To spot images without alt text, run a free checker such as WAVE. If Octo Assist is on your site, its Image descriptions tool shows an image's alt text when you point at it, and "This image has no description" when there is none. Then work through the rest of the website accessibility checklist.