Skip to content

How to write image alt text

SEOAccessibility2 min readFixes 7 checks img-alt-empty-linked, img-alt-filename, img-alt-missing, img-alt-duplicate, img-alt-too-long, image-alt, img-alt-empty-decorative

Alt text describes an image for screen readers and for Google Images. Describe what matters; mark decorative images with an empty alt.

Step by step, with screenshots: Alt text: what it is and how to write it, with examples →

Check your own site

Runs these 7 checks and the other 186, free, in about 45 seconds.

Or run only this check with the free Image alt text checker or the free Image size checker.

What it is

Alt text is the alternative text in an image's alt attribute, such as <img src="boots.jpg" alt="Brown leather ankle boots with a side zip">. Screen readers read it aloud, browsers show it when the image fails to load, and search engines use it to understand what the image shows.

WCAG 2.2 success criterion 1.1.1 requires a text alternative for every meaningful image, and Google recommends descriptive alt text for images you want found in Google Images. getReport flags images with no alt attribute at all and lists images marked as decorative with alt="", so you can check that product photos were not skipped by mistake. A page is OK when every informative image has a short, specific description and purely decorative ones have an empty alt.

What a passing site looks like

  • Every image link has a textfail · −12 ptseffort S
  • No image uses its file name as alt textwarning · −5 ptseffort S
  • Every image has an alt attributefail · −8 ptseffort S
  • Every image has its own alt textwarning · −2.5 ptseffort S
  • Every alt text is 125 characters or shorterwarning · −2.5 ptseffort S
  • Every image has alternative textwarning · −1.5 ptseffort S
  • Images marked decorative: passesinfo onlyeffort S

1. Image links without a name

Why it matters. When an image is the only thing inside a link and its alt is empty, the link has no name: a screen reader announces "link" and nothing else, and keyboard users cannot tell where it goes. Logos linking home and product thumbnails are the usual cases.

How to fix it.
  1. Give the image an alt that says where the link goes ("Example Shop home", "Drava Classic sneakers"), or add visible text to the link.

2. File names as alt text

Why it matters. A file name describes the camera or the upload, not the picture. Screen reader users hear "IMG underscore one two three four" and Google Images has nothing to match a search against. It usually comes from a CMS that fills the alt text with the file name on upload.

How to fix it.
  1. Replace it with what the picture shows, in one short sentence ("Blue running shoe, side view").
  2. In WordPress, edit the alt text field in the media library; the checker's CSV lists every image to change.

3. Images without alt text

Why it matters. Alt text is how Google Images and screen readers understand a picture. Missing alt text loses image traffic and fails accessibility.

How to fix it.
  1. Describe each meaningful image in a short alt attribute ("Blue running shoe, side view").
  2. Give purely decorative images an empty alt="" so screen readers skip them.

4. Repeated alt text

Why it matters. When several different pictures carry the same words, a screen reader user cannot tell them apart and Google Images sees one description for many files. It usually comes from a theme that reuses the post title, or from copying a product name onto every photo.

How to fix it.
  1. Say what differs between the images ("Drava Classic, side view", "Drava Classic, sole").

5. Alt text length

Why it matters. Screen readers read alt text in one go, without the ability to pause or skip, and some older ones stop after 125 characters. A paragraph in the alt attribute is tiring to hear and gets cut off.

How to fix it.
  1. Keep the alt text to one sentence about what the image shows; move the detail into a caption or the body text.

6. Image alt text

Why it matters. Alt text is what screen readers speak and what appears when an image does not load. Without it, product photos and infographics are silent for blind visitors and invisible to image search.

How to fix it.
  1. Add alt="…" describing what the image shows, in one sentence, to every informative image.
  2. Use alt="" (empty) for purely decorative images so screen readers skip them.

7. Images marked decorative

Why it matters. An empty alt tells screen readers and Google Images to skip the picture. That is right for spacers and background art, and a lost opportunity for product photos.

How to fix it.
  1. Check the list in the technical detail; give any image that carries meaning a short description instead of alt="".

Questions people ask

What is a good example of alt text?

Describe what the image shows and why it is there. For a product photo: alt="Navy wool coat, knee length, with two rows of buttons". For a chart, state the key finding, such as alt="Sales rose 40 % from January to June". For a linked logo, describe the destination, such as alt="example-shop home". Avoid "image of" and file names like IMG_2041.jpg.

Does alt text help SEO?

Yes. Google uses alt text, together with the page text and the file name, to understand what an image shows and which searches it is relevant for, especially in Google Images. Alt text on a linked image also works like anchor text for that link. Write it for people first; stuffing keywords into alt attributes is treated as spam and does not help.

How do I write good alt text?

Imagine describing the image to someone on the phone in one sentence. Be specific, put the most important detail first, include any text that appears in the image, and skip what the surrounding text already says. Leave alt empty (alt="") for decorative images such as dividers and background patterns, so screen readers skip them instead of reading the file name.

How long should alt text be?

Usually one short sentence, under about 125 characters. There is no hard limit in HTML or WCAG, but long descriptions are tiring to listen to and cannot be skimmed. If an image needs a detailed explanation, such as a complex chart or diagram, put it in a caption or the surrounding text and keep the alt text short.

Filed under Accessibility. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.