What Is Image Alt Text? Complete Guide (2026)

Saar TwitoPublished May 21, 2025Updated April 30, 20269 min read

Saar TwitoFounder & SEO Engineer

Hi, I'm Saar - a software engineer, SEO specialist, and lecturer who loves building tools and teaching tech.

What Is Image Alt Text?

Image alt text (alternative text) is a short text description of an image set via the HTML alt attribute. It is read aloud by screen readers, displayed in place of the image when the file fails to load, and parsed by search engines and AI systems to understand what the image depicts. The alt attribute is required on every <img> element in valid HTML.

Key Facts (TL;DR)

WCAG criterion: WCAG 2.2 SC 1.1.1 Non-text Content (Level A) — every non-text element must have a text alternative that serves the equivalent purpose.
Audit threshold: Every <img> without an alt attribute is flagged. alt="" (empty string) is valid for purely decorative images.
Length guideline: Aim for ~125 characters or fewer — most screen readers truncate longer alt text.
Reach: The World Health Organization estimates roughly 250 million people globally are blind or have severe low vision and rely on screen readers.
SEO impact: Alt text is a confirmed Google ranking signal for image search and contributes to the surrounding page's topical relevance.
AI search: Multimodal AI systems (Google AI Overviews, generative answer engines) parse alt text to decide whether to cite or include images in answers.
Three image categories: informative (describe), decorative (alt=""), functional (describe the action).

Think of alt text like the audio description on a film. A sighted viewer sees the picture; a blind viewer hears the description. If the description is missing, vague, or padded with irrelevant detail, the experience breaks. Good alt text gives every visitor — and every crawler — the same understanding of what the image is doing on the page.

Why Alt Text Matters

Alt text is one of the rare web attributes that pays off across accessibility, SEO, and AI search visibility at the same time.

Accessibility:~250 million people globally rely on screen readers. When alt text is missing, screen readers either say nothing (the image is invisible to the user) or announce the filename — "IMG_2024_05_03 dot jay-peg" — which leaks internal paths and tells the user nothing about what they're missing.
Legal compliance: WCAG 2.2 SC 1.1.1 is a Level Acriterion — the strictest and earliest tier, included in the ADA, EAA, AODA, and UK Equality Act. Missing alt is the single most-cited issue in accessibility lawsuits because it's mechanically detectable.
SEO:Alt text is a confirmed Google ranking signal for image search and feeds the surrounding page's topical understanding. Pages with descriptive alt earn more image-search traffic; pages with missing alt are effectively invisible to image search.
AI search visibility: Multimodal AI search engines (Google AI Overviews, Perplexity, ChatGPT) read alt text when deciding whether to cite a page or surface its images. Pages with thoughtful alt text are dramatically more likely to be picked.
Resilience:When an image fails to load — slow network, broken CDN, corrupted file — alt text is what every visitor sees. It's the fallback that keeps your page intelligible under bad conditions.

The Three Categories of Images

Not every image needs the same treatment. WCAG and the WAI image-tutorial classify images into three buckets, and the right alt text depends on which bucket the image falls into.

1. Informative Images

Images that convey content or meaning that isn't already present in the surrounding text. The alt text describes the content/purpose.

<img
  src="/park.jpg"
  alt="Three children playing soccer in a park at sunset"
/>

2. Decorative Images

Pure visual decoration — borders, dividers, background flourishes, stock photos that are duplicated by the caption next to them. Use an empty alt so screen readers skip the image entirely. Don't write alt="decoration" — that announces the decoration, defeating the point.

<img src="/divider-flourish.svg" alt="" />

3. Functional Images

Images that act as links or buttons (icon-only buttons, image links). The alt text describes the action, not the picture.

<a href="/cart">
  <img src="/cart-icon.svg" alt="View shopping cart" />
</a>

<button type="submit">
  <img src="/search-icon.svg" alt="Search" />
</button>

How to Audit Alt Text Across Your Site

Missing or weak alt is the easiest accessibility issue to scan for, since it's a static HTML attribute. Site-wide visibility is the hard part.

Greadme deep scan — flags every <img> with a missing alt, an empty alt that should be informative, or a clearly bad alt (filename, keyword stuffing). Each issue ships with an AI-generated suggestion or a one-click GitHub PR.
Greadme crawler scan — runs the same alt audit across every indexable URL, so you can identify which templates (blog posts, product pages, CMS-generated pages) are recurring offenders.
Greadme AI visibility analyzer — checks how AI search engines parse your image content, surfacing alt-text issues that hurt both human readers and AI-citation odds.
Chrome DevTools accessibility panel — inspect any element to see the computed accessible name, including how a screen reader will announce its image.
axe-core (open-source rules engine) — the underlying rules library used by most accessibility audits. You can run it locally as a browser extension for a single-page check.
Manual screen reader test — open a page with VoiceOver (macOS), NVDA (Windows), or JAWS and tab through. The fastest way to feel where alt text is missing or unhelpful.

8 Rules for Writing Strong Alt Text

1. Describe the Purpose, Not the Pixels

Ask: "Why is this image on the page?" A photo of a chef next to a recipe might be alt="Chef Marco kneading sourdough dough" on the recipe page and alt="Marco Rossi" on the team page — same image, different purpose.

2. Keep It Under ~125 Characters

Most screen readers truncate alt text around 125 characters. For complex content (charts, infographics), use a short alt and link to a longer description with aria-describedby.

<img
  src="/sales-chart.png"
  alt="Q1 2026 revenue chart, full description below"
  aria-describedby="chart-desc"
/>
<p id="chart-desc">Revenue grew from $1.2M in January to $1.8M in March, a 50% increase…</p>

3. Skip "Image of" and "Photo of"

Screen readers already announce the element as an image. Adding "image of…" in the alt makes them say "graphic, image of a sunset" — redundant and noisy.

4. Use Empty Alt for Decoration

alt="" tells assistive tech to skip the image. This is the correct value for dividers, ornaments, and stock photos that only repeat the adjacent caption.

<img src="/ornament.svg" alt="" role="presentation" />

5. Don't Repeat the Caption

If a caption already says "Sunset over the Pacific" and the alt also says "Sunset over the Pacific," screen-reader users hear the same sentence twice. Either use empty alt (caption carries the meaning) or write a complementary alt that adds detail.

6. Never Use the Filename

alt="IMG_2024_05_03.jpg" is worse than missing alt — it leaks internal naming, tells the user nothing, and gets crawled by search engines as page content.

Fix: If your CMS auto-fills alt with filename, override it manually for every published image. Add a CMS-level guard that warns when alt looks like a filename.

7. Don't Stuff Keywords

alt="cheap shoes buy shoes mens shoes running shoes" is a textbook spam signal. Google has demoted pages for it explicitly, and screen-reader users hear an unintelligible word salad.

Fix:Write one natural sentence. If you want the image to rank for a query, write that query into a real description — "Black men's running shoes with white sole, side view."

8. Match Alt to Function for Linked Images

When the image is the only content inside a link or button, the alt becomes the accessible name of the link. Describe the destination/action, not the image.

<a href="/account">
  <img src="/avatar.png" alt="Open account settings" />
</a>

Common Alt Text Mistakes and Fixes

Problem: Missing Alt Attribute Entirely

What's happening: The <img> has no alt attribute at all. Some screen readers fall back to the filename, exposing internal paths; others announce nothing, so the user doesn't know an image exists.

Fix: Every <img> needs alt. If informative, describe it. If decorative, set alt="". There is no third option.

Problem: Filename Used as Alt

What's happening: The CMS auto-populated alt="DSC_4571.jpg". Screen-reader users hear gibberish; search engines log it as page content.

Fix: Override automatically. Add a publishing guard that rejects alt text matching common filename patterns (img_, dsc_, screenshot, .jpg/.png).

Problem: Decorative Image with Non-Empty Alt

What's happening: A divider flourish has alt="divider". Screen-reader users hear "graphic, divider" in the middle of the article — pure noise.

Fix: Use alt="" on every decorative image. Optionally add role="presentation" for older assistive tech.

Problem: Icon Button with No Accessible Name

What's happening: A search button is <button><img src="search.svg"></button>. Both the image and the button are unlabeled — screen-reader users hear "button" with no clue what it does.

Fix: Add alt="Search" on the image, or aria-label="Search" on the button. Either gives the control a usable accessible name.

Alt Text Patterns by Image Type

Different image types call for different alt-text strategies. This is the cheat sheet most teams need at hand.

Image Type	Correct Alt Pattern	Example	Common Mistake
Informative photo	Describe content / purpose	`alt="Chef Marco kneading dough"`	Filename, "photo of…"
Decorative graphic	Empty string	`alt=""`	`alt="decoration"`
Icon button / image link	Describe the action / destination	`alt="View shopping cart"`	`alt="cart icon"`
Logo (in header link)	Site name + "home"	`alt="Greadme home"`	`alt="logo"`
Chart / infographic	Short summary + long description via `aria-describedby`	`alt="Q1 revenue chart, full description below"`	One-word alt, full prose stuffed into alt
Image with caption	Empty alt or complementary alt	`alt=""` (caption carries meaning)	Alt that duplicates caption verbatim

FAQ

Is the alt attribute required?

Yes. Every <img> element in valid HTML must have an alt attribute. The value can be an empty string (for decorative images), but the attribute itself is mandatory under WCAG 2.2 SC 1.1.1 (Level A) and HTML validation.

How long should alt text be?

Aim for ~125 characters or fewer. Most screen readers truncate longer text, and verbose alt is fatiguing to listen to. For complex visuals (charts, diagrams), keep alt short and link to a longer description with aria-describedby.

Does alt text help SEO?

Yes. Alt text is a confirmed Google ranking signal for image search and contributes to the surrounding page's topical relevance. Pages with descriptive alt earn more image-search traffic; pages with missing alt are effectively invisible to image search.

Does alt text affect AI search engines like ChatGPT and Perplexity?

Yes — directly. Multimodal AI search engines parse alt text to understand what an image depicts when they're deciding whether to cite a page or surface its images in an answer. Pages with thoughtful, descriptive alt are markedly more likely to be picked over pages with missing or generic alt.

What's the difference between alt and title attributes?

alt is the accessible name read by screen readers and shown when the image fails to load — it's required and core to accessibility. title shows a tooltip on hover, isn't reliably announced by screen readers, and is invisible on touch devices. Use alt for the description; only use title for genuinely supplemental hover hints.

When should I use an empty alt?

Use alt="" when the image is purely decorative or when its content is already conveyed by adjacent text (a caption, a heading next to it). The empty alt tells assistive tech to skip the image entirely, which is the right experience for visuals that carry no independent meaning.

Can I use AI to generate alt text?

Yes — and most modern auditing tools do exactly that for missing alt. AI-generated alt is much better than no alt and a strong starting point, but it should be reviewed for context: the same photo means different things on different pages, and only a human (or an AI with full page context) can pick the right framing.

Conclusion

Alt text is the single highest-leverage accessibility attribute on the web: a few well-chosen words make every image readable to screen-reader users, indexable by search engines, and citable by AI search systems — all at once. Make it required at publish time, never let filenames or keyword strings ship as alt, and use alt="" for genuine decoration so the rest of your descriptions stand out.

Run a Greadme deep scanto surface every image on your site that's missing alt, has a filename-style alt, or repeats the surrounding caption — and ship the fix as a one-click GitHub PR.