Image Alt Test
What is it?
The alt attribute on an image tag provides a text alternative that describes the image's content or function. It is read aloud by screen readers when a user cannot see the image, displayed in place of the image when it fails to load, and used by search engines and multimodal AI models to understand what the image depicts. Adding meaningful alt text to every meaningful image is one of the simplest, highest-leverage improvements you can make to a page.
Why alt text matters for accessibility and SEO
Alt text is a baseline accessibility requirement. Visitors using screen readers depend on it to understand what an image conveys; without it, the image is effectively invisible. Beyond accessibility, alt text is the primary signal Google uses to understand image content, which determines whether the image appears in Google Image search results and how the surrounding article is interpreted. A page with thoughtful alt text on its images sends a stronger topical signal than the same page with empty alt attributes.
The right approach is also simple: describe what the image shows or what function it performs. A photo of a runner on a trail might use alt="Marathon runner climbing a forest trail at sunrise". A button image that submits a form might use alt="Send message". Decorative images such as background patterns or dividers should use alt="", telling screen readers to skip them.
The newer reason: multimodal AI
Multimodal AI models that process both text and images use alt text as a guide when interpreting the visual content of a page. The same alt text that helps Google Image search also helps AI answer engines understand and reference your visuals when generating responses, and helps multimodal LLMs caption or summarize content correctly. Good alt text now pays compounding dividends across both classical image SEO and modern AI content understanding.
Common mistakes worth checking
- Attribute missing entirely, leaving screen readers to either skip the image or read out the file name.
- Alt text is the file name, such as "IMG_4837.jpg", which tells the user nothing useful.
- Decorative images getting descriptive alt text, forcing screen readers to narrate noise.
- Alt text duplicating a visible caption, doubling the listening time for screen reader users.
- Bulk imports left blank, especially in older media libraries where the alt field was never required.
This test verifies that the meaningful images on your page include alt attributes. The fix guide below covers how to add and improve alt text in raw HTML, in the major content management systems, and in framework image components.
Pass rate:
-
Top 100 websites: 78%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 29%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 71% |
|---|---|
| 2022 | 76% |
| 2023 | 71% |
| 2024 | 78% |
100
75
50
25
0
How do I fix it?
Alt attributes provide a text alternative for images, used by screen readers when a user cannot see the image and by search engines and multimodal AI models to understand what the image depicts. Fixing this issue means writing concise, descriptive alt text for every meaningful image on the page, and using empty alt for purely decorative images so assistive technology can skip them. The same alt text helps multimodal LLMs and image search tools surface and cite your visuals.
Example
<img src="/images/marathon-shoes.jpg"
alt="Side view of a lightweight neon-green marathon running shoe">
<img src="/images/divider.svg" alt="">Where to make the change
- Raw HTML: add the
altattribute to every<img>tag. For decorative images, usealt=""so screen readers skip them. - WordPress: the media library has an Alt text field on every uploaded image. Fill it once and the value is reused everywhere the image is inserted.
- Shopify: in the product or page editor, click an image and use the Edit alt text option. Theme code that renders product images should pull
image.alt. - Wix or Squarespace: click the image in the editor and use the Alt text or Image description field in the side panel.
- Headless or framework sites: require an
altprop on every image component and lint for missing values during build.
Common causes and how to resolve them
- Attribute missing: add
alt=""at minimum so the page validates. Replace with descriptive text on any image that conveys information. - Alt text is the filename: "IMG_4837.jpg" tells the user nothing. Replace with a description of what is in the image.
- Alt text duplicates the visible caption: screen readers will read both, doubling the user's listening time. Differentiate the alt from the caption or empty the alt.
- Decorative images get descriptive alt text: background patterns and dividers should use
alt="", otherwise screen readers narrate noise. - Bulk imports left alt blank: a one-off audit of the media library or a CMS-side script can fill missing alt values from product names, captions, or asset descriptions.
Best practices
- Describe the function, not just the appearance: for a chart, describe what the chart shows. For a button image, describe what the button does.
- Keep it concise: aim for under 125 characters. Screen readers do not pause mid-sentence, so long alt text is exhausting to listen to.
- Skip "image of" or "picture of": the screen reader already announces it as an image.
- Include the focus keyword when natural: alt text is a minor on-page signal, but stuffing keywords in unnatural alt text harms both accessibility and ranking.
