Image alt text
The alt attribute gives an image a text alternative:
<img src="/img/red-trail-shoe.jpg" alt="Red trail running shoe with deep rubber lugs" />
Browsers show it when the image fails to load, screen readers read it aloud, and search engines use it to understand what the image shows.
Why it matters
Accessibility. For people who use a screen reader, an image without alt is either skipped or
announced by its file name, such as “IMG underscore 4032 dot jpg”. Text alternatives for images are
a WCAG Level A requirement (success criterion 1.1.1).
Search. Google uses alt text, together with the surrounding text and the file name, to understand images. That matters for Google Images and for understanding the page itself. An image used as a link with no alt text also gives the link no anchor text.
What we check
We count every <img> element in the HTML and how many of them have no alt attribute at all.
| Result | When |
|---|---|
| Pass | 90% or more of images have an alt attribute, or there are no images |
| Needs attention | 50% to 89% have one |
| Fail | fewer than 50% have one |
An empty alt="" counts as present, because it is the correct markup for decorative images. We do
not judge the quality of the text. The report lists up to five image sources that are missing the
attribute.
Only <img> elements in the server’s HTML are counted. CSS background images, inline <svg> and
images added later by JavaScript are not.
How to fix
Give every <img> an alt attribute. What to put in it depends on the image’s job.
Informative images (photos, diagrams, product shots): describe what the image shows that matters in this context, in a short sentence.
<img src="chart.png" alt="Sales grew from 40 to 65 units per month between January and June" />
Functional images (an image inside a link or button): describe the action or destination, not the picture.
<a href="/"><img src="logo.svg" alt="Example Ltd home page" /></a>
Decorative images (spacers, background flourishes, an icon next to text that already says the
same thing): use an empty alt so screen readers skip them.
<img src="divider.svg" alt="" />
Images of text: put the same text in the alt.
Writing good alt text
- Be specific and brief. “Golden retriever catching a frisbee on a beach” beats “dog” and beats a paragraph.
- Do not start with “Image of” or “Picture of”. Screen readers already announce it as an image.
- Do not stuff keywords. Write for a person who cannot see the image; that is also what search engines want.
- Do not repeat a caption word for word. If a visible caption already describes the image, the alt can be shorter or focus on what the caption does not say.
At scale
- CMS media libraries usually have an “alternative text” field per image. Fill it in when you upload, and make sure your theme outputs it.
- Templates that render product or article images should take alt text from a real field (such as the product name plus a variant), not leave it out.
- User uploads can default to an empty alt plus a prompt for the uploader to describe the image.
Google’s image SEO best practices cover alt text alongside file names, sizes and image sitemaps.