What is alt text, and how do you write it?

Alt text (short for alternative text) is the description you give an image in its alt attribute. It is read aloud by screen readers for people who can't see the image, shown when the image fails to load, and used by Google to understand what the image shows.

What alt text looks like

<img src="trail-shoe.webp" alt="Blue trail running shoe with a thick grey sole, side view">

That's all it is: a few words inside the image tag. It doesn't show on the page unless the image breaks.

Why alt text matters

Accessibility

Millions of people use screen readers. Without alt text, a screen reader either skips the image or reads out the file name, such as "IMG underscore 4471 dot jpg". Accessibility laws and standards like the Web Content Accessibility Guidelines (WCAG) require a text alternative for meaningful images.

Image SEO

Google can analyse images, but it still relies heavily on alt text and the text around an image to understand it. Good alt text helps your images appear in Google Images and in image results on the main search page. It also adds relevant context to the page itself.

How to write good alt text

Describe what the image shows, as you would to someone over the phone.

1. Be specific. "Red ceramic coffee mug with a wooden handle" beats "mug".
2. Keep it short. One sentence is usually enough. Many screen readers handle long text fine, but brevity respects the listener.
3. Include context that matters. On a product page, mention the colour or model. In a tutorial, describe what the screenshot shows.
4. Don't start with "image of" or "picture of". Screen readers already announce it as an image.
5. Use a keyword only if it describes the image. Never stuff a list of keywords into alt text.

See alt text examples for good and bad versions side by side.

When to leave alt text empty

Purely decorative images (background shapes, dividers, icons next to a text label) should have an empty alt attribute: alt="". This tells screen readers to skip them. An empty alt is different from a missing alt: a missing attribute makes some screen readers read the file name instead.

Common alt text mistakes

• Leaving alt off entirely, so screen readers read the file name.
• Using the same alt text on every image ("product image").
• Writing a keyword list: "shoes, running shoes, cheap shoes, best shoes".
• Describing a linked image's look instead of where the link goes.
• Forgetting images added through a page builder or CMS gallery.

How to find images missing alt text

Enter any page in the checker on this page and it lists every image, flagging those with no alt attribute, empty alt text, file-name-style alt text or text that is too long. For many images at once, the AI alt text generator can suggest descriptions you then review and edit.