All articlesHow to Write Alt Text That Works for Screen Readers and AI Search
9 min read

How to Write Alt Text That Works for Screen Readers and AI Search

Alt text has to work for two audiences at once: screen reader users and AI crawlers. Here's how to write it so both actually understand your images.

Good alt text describes the content and function of an image in one or two plain sentences, without stuffing keywords or repeating what's already in the surrounding text. It needs to work for two very different readers at once: a screen reader user who can't see the image, and an AI crawler like GPTBot or Googlebot that's trying to figure out what your page is actually about. Get it right and you satisfy WCAG 1.1.1 and hand AI search engines a clean, citable description of your content. Get it wrong, and you're either invisible to assistive tech or you look like a spam site to a language model.

I've audited a lot of image-heavy sites — real estate listings, ecommerce catalogs, portfolio sites — and alt text is consistently one of the most botched WCAG rules on the books. The WebAIM Million study, which scans the home pages of the top one million websites every year, has found missing alt text on images year after year among the most common accessibility failures detected. That's not a niche problem. It's practically universal.

What is alt text, exactly?

Alt text is the value of the alt attribute on an <img> element. It's read aloud by screen readers, displayed when an image fails to load, and increasingly, parsed by AI models trying to understand page content they can't literally "see."

Here's the baseline markup:

<img src="golden-retriever-park.jpg" alt="Golden retriever catching a frisbee in a park">

That's it. No magic. But the words you choose inside those quotes carry a surprising amount of weight — for compliance, for usability, and now for how AI answer engines cite your site.

How do you write alt text that actually works?

Start by asking what job the image is doing on the page. A product photo needs a different kind of description than a decorative background swirl or an infographic packed with data. There's no single template that covers every case, but a few rules hold up across almost all of them.

  • Describe function before appearance. If an image is a link or a button, describe where it goes or what it does — not just what it looks like. "Search icon" is weaker than "Search this site."
  • Be specific, not generic. "Woman at desk" tells a screen reader user almost nothing. "Woman reviewing tax documents at a laptop" tells them what's actually happening and why the image is there.
  • Skip the redundant phrases. Never start with "image of" or "picture of." Screen readers already announce that it's an image. Saying it twice just wastes the user's time.
  • Keep it short — usually. Somewhere around 125 characters is a common rule of thumb, mostly because some older screen readers used to truncate around there. Modern screen readers don't have that limit, but brevity is still good practice. One or two sentences is almost always enough.
  • Match the tone of the page. A product image on an ecommerce site should mention color, material, or distinguishing features a shopper would care about — "Charcoal wool peacoat with brass buttons," not "Coat."

And here's the one thing most people get wrong: they treat alt text like a caption. It's not. A caption sits next to the image and adds context for everyone. Alt text replaces the image for someone who can't see it at all. If your alt text just repeats the caption word for word, you've written the caption twice and helped no one.

Does every image need alt text?

No. Purely decorative images — a divider graphic, a background texture, a stock photo that adds nothing informational — should use an empty alt attribute: alt="". This tells screen readers to skip the image entirely instead of announcing a meaningless filename like "IMG_4021.jpg."

The mistake I see constantly is the opposite: developers leave the alt attribute off entirely rather than setting it to empty. That's a WCAG failure even for decorative images, because a missing attribute forces some screen readers to read the file path out loud. "Slash images slash banner dash final dash v2 dot jpg" is not an experience anyone wants.

So the real rule is: every <img> needs an alt attribute. Whether that attribute has text in it depends on whether the image conveys information. If you want the full list of WCAG rules that cover this kind of thing — and 32 others — the WCAG fix guides hub walks through each one with copy-paste fixes.

How is alt text different for SEO and AI search versus screen readers?

It isn't, mostly — and that's the good news. The same descriptive, specific alt text that helps a screen reader user also helps Google understand what an image shows, and helps AI models like ChatGPT or Perplexity extract accurate context when they crawl your page. There's no separate "SEO version" you need to write.

What changes is the failure mode. A human screen reader user who hits bad alt text gets annoyed and maybe leaves. An AI crawler that hits bad or missing alt text just skips the image's contribution to the page's meaning entirely — no exceptions to your favorite content, no citation, no inclusion in an AI Overview summary. If your product page relies on an image to show size charts or ingredient lists with no supporting text, an AI engine has nothing to work with. It can't infer what a JPEG says.

This matters more now than it did five years ago. AI answer engines are increasingly the front door to search — a growing share of informational queries now get answered directly inside ChatGPT, Perplexity, or a Google AI Overview before the user ever clicks a link. If your images are the only place key facts live, and those images have no meaningful alt text, that content is effectively invisible to the systems doing the summarizing. For a broader look at what AI crawlers can and can't parse on a page, the AI readability pillar guide is worth reading — it covers crawler access, content structure, and what makes a page "extractable" in more depth than I can fit here.

One practical tip: keyword-stuffed alt text ("blue running shoes cheap running shoes buy running shoes online") used to be a gray-hat SEO trick. It doesn't work anymore, and it actively hurts you with AI parsers, which are trained to recognize and discount that pattern. Write for the human first. The AI benefit follows naturally.

What are common alt text mistakes to avoid?

A few patterns show up over and over in audits, across nearly every industry I've looked at.

  • Filename as alt text. alt="DSC00234.jpg" tells the user nothing. This happens most often on sites using a CMS that auto-populates alt text from the upload filename, and nobody goes back to fix it.
  • Alt text on logos that just says "logo." Better: the company name, or the company name plus tagline if the logo links to the homepage. "Return to homepage" is fine too, if that's literally the function.
  • Overly long, essay-style descriptions. I once reviewed a nonprofit's site where a single infographic had 400 words of alt text crammed into one attribute. Screen reader users don't want a novel — they want the key point. Long, data-dense images are usually better served by a text alternative near the image (a table, a summary paragraph) rather than jamming everything into alt.
  • Using alt text for SEO keyword stuffing. Covered above, but worth repeating: it doesn't fool anyone anymore, human or machine.
  • Forgetting alt text on linked images. If an image is wrapped in an <a> tag, the alt text needs to describe the destination, not just the picture. "Photo of team" is wrong if clicking it goes to the "About Us" page — "About our team" is right.

What about complex images like charts, graphs, and infographics?

Alt text alone often isn't enough for a data-heavy image. A bar chart showing five years of revenue growth can't be meaningfully summarized in one sentence — and it shouldn't be.

The standard approach: write a short alt text that identifies what the chart is ("Bar chart of quarterly revenue, 2021 to 2025"), then provide the underlying data as an actual text table or a paragraph elsewhere on the page. This serves screen reader users, who can navigate a real data table far more efficiently than they can parse a paragraph-length alt description. And it serves AI crawlers, which can extract structured HTML tables with much higher fidelity than they can any image, no matter how good the alt text is.

This is actually a case where accessibility best practice and AI readability point in exactly the same direction: put the real content in real HTML, and let the image be a visual supplement rather than the sole source of truth. It's part of a bigger idea — using semantic HTML so that both assistive tech and AI models can parse what's actually on the page instead of guessing from pixels.

How do you check if your alt text is actually working?

Manually reading through every <img> tag on a large site isn't realistic. Most teams either skip the check entirely or do a shallow pass on a handful of pages and call it done.

A faster approach is to run an automated scan that flags every image missing alt text, every empty alt on a non-decorative image, and every alt attribute that's suspiciously short or filename-based. That's one of 33 checks a tool like AccessKnight's free scan runs against any URL, alongside a separate score for how well your page's content — including image context — comes through to AI crawlers. Running both checks together tends to surface the same handful of pages that are quietly costing you both compliance and AI visibility.

Frequently Asked Questions

What is the ideal length for alt text?

Most alt text should run one to two short sentences, roughly under 125 characters as a rough guideline. There's no hard technical limit in modern screen readers, but concise, specific descriptions serve users better than long ones. Complex images like charts need a separate text alternative rather than a longer alt attribute.

Should alt text include keywords for SEO?

Only if the keyword naturally describes the image. Write for the person or system trying to understand the picture first, and let relevant terms show up where they genuinely fit. Stuffing unrelated keywords into alt text doesn't help rankings and can look manipulative to both search engines and AI crawlers.

What happens if an image has no alt attribute at all?

Screen readers typically fall back to reading the image's file name out loud, which is confusing and unhelpful. It's also a straightforward WCAG 1.1.1 failure, regardless of whether the image is decorative or informative — every <img> tag needs an alt attribute, even if that attribute is empty.

Do decorative images need alt text?

They need an empty alt="" attribute, not descriptive text. This tells screen readers to skip the image silently instead of announcing a filename or a meaningless description, which would otherwise waste the user's time.

Can AI search engines read text embedded inside an image?

Generally, no — not reliably. Most AI crawlers parse HTML and don't run OCR on every image they encounter. If key information, like a phone number or a price, only exists inside an image, it's effectively invisible to most AI answer engines. Put that information in real text on the page, and use alt text to describe the image itself.

How is alt text different from a title attribute or a caption?

Alt text is a replacement for the image, read by screen readers when the image can't be seen or displayed. A caption is visible text next to the image meant for all readers. A title attribute shows up as a tooltip on hover and isn't reliably read by screen readers at all — it shouldn't be used as a substitute for alt text.

A specific next step

Pick your five highest-traffic pages and open the page source (or use your browser's inspector) to check every <img> tag for an alt attribute. Rewrite anything generic, missing, or filename-based using the function-first approach above. It's a 20-minute task per page, and it's usually the single highest-impact accessibility fix you can make in one sitting — for actual users and for the AI systems now reading your site.

Check your website's accessibility

Scan against all 33 WCAG 2.1 rules and get code-level fix suggestions — free.

Run a free scan

Keep reading