How to write alt text that actually helps

Alt text is the short text that replaces an image when someone can't see it. A screen reader reads it out, search engines index it, and browsers show it when an image fails to load.

Missing alt text is one of the most common accessibility problems on the web. Bad alt text is almost as common: file names, keyword lists, or "image" on its own. Here is how to write alt text that actually helps.

The one question to ask

Ask yourself: if I replaced this image with a short piece of text, what would that text need to say?

The answer depends on why the image is there, not just on what it shows. The same photo of a person can need different alt text on a team page ("Maria Lopez, head of support") and in a blog post about remote work ("A woman working on a laptop at a kitchen table").

Alt text by type of image

Product photos

Describe what a shopper needs to know and can't get from the product name: colour, style, angle, what's in the box.

Logos

Use the company name. If the logo is a link to the home page, say where it goes.

Icons and image buttons

Describe the action, not the picture: "Search", not "magnifying glass".

Decorative images

Background textures, dividers and images that repeat what the text next to them already says get an empty alt, so screen readers skip them. Leave the attribute there, empty: without it, many screen readers read the file name instead.

Charts and infographics

Give the main point in the alt text and the details in the page itself, for example in a table or a paragraph under the chart.

Images of text

If an image contains text, such as a banner with a discount code, the alt text must include that text. Better still, use real text styled with CSS, so it can be zoomed, translated and selected.

Five rules of thumb

1. Keep it short. A sentence or less is usually enough. There is no strict character limit, but long alt text is tiring to listen to.
2. Don't start with "Image of" or "Picture of". The screen reader already says it is an image.
3. Don't stuff keywords. "Running shoes cheap running shoes best running shoes" helps nobody, and search engines don't reward it either.
4. Don't repeat the caption. If a caption already says it, use a shorter alt text or an empty one.
5. End with a full stop. Many screen readers pause at it, which makes the text easier to follow.

Where to add alt text

• WordPress: Media Library → click the image → Alternative Text field. In the block editor, select the image and use the Alternative text field in the block settings.
• Shopify: Products → open a product → click an image in Media → Add alt text.
• Webflow: select the image → settings (the cog) → Alt text. Choose Decorative for images that should be skipped.
• Wix and Squarespace: open the image settings and look for What's in the image? or Alt text.

Alt text set in the media library is not always used everywhere an image appears, so check the page itself after you change it.

Check your own images

Our free checker above lists every image without a text alternative on the page you scan, with a screenshot of each one. Then use our alt text checklist to write good alt text for each, and see how to fix missing alt text for platform steps, including SVG images and image buttons.