How to write alt text for images

Alt text is a short written description of an image, added with the alt attribute.

Why it matters

Screen readers read alt text aloud to people who can’t see the image. Search engines use it to understand images, which helps them appear in image search.

If an image fails to load, the browser shows the alt text instead.

How to fix it

1. Add an alt attribute to every <img>.
2. Describe what the image shows and why it’s there, in a short phrase. Include a keyword only where it fits naturally.
3. Don’t start with “image of” or “picture of”; screen readers already announce it’s an image.
4. For purely decorative images, use an empty attribute: alt="", so screen readers skip them.
5. For linked images, describe where the link goes.

<img src="wallet.jpg" alt="Tan leather bifold wallet with six card slots">
<img src="divider.svg" alt="">