Alt text: what it is, why it matters, and how to write it

Alt text helps search engines and screen readers understand images. Learn how to write useful, non-spammy alt text with examples and quick audits.

2026-03-01
·
2 min read

Alt text (short for “alternative text”) is the text you attach to an image so people and machines can understand what the image shows when the image can’t be seen. In HTML it looks like this:

<img src="/images/lcp-example.png" alt="LCP chart showing a 2.1s Largest Contentful Paint after optimization">

If you only remember one rule: alt text should describe the image in plain language, and it should make sense on this page.

Why alt text matters (and when it matters less)

Alt text helps in three practical ways:

  1. Accessibility: Screen readers read alt text aloud. If you write nonsense, you punish real users.
  2. Image understanding: Search engines use alt text as a hint to interpret the image and connect it to the page topic.
  3. Fallback UX: When images fail to load, alt text is the only thing left besides a broken box.

It matters most when images carry meaning: charts, screenshots, product photos, UI steps, infographics. It matters less for purely decorative flourishes.

Good alt text vs bad alt text (quick examples)

Bad (too vague):

  • “image”
  • “screenshot”

Bad (spam):

  • “seo audit tool best seo checker free seo audit website audit tool”

Good (specific, short, matches context):

  • “Screenshot of the Fennec SEO Checker audit summary showing 3 critical issues”
  • “Product photo: red running shoes with white sole, side view”
  • “Chart: organic traffic down 40% after a canonical tag mistake”

A simple way to write alt text that doesn’t feel awkward

I use this mental template:

  • What is it? (photo, screenshot, chart, icon)
  • What’s the important detail? (the thing the reader needs)
  • Optional context if it clarifies (page name, number, key label)

You don’t need full sentences. You do need accuracy.

Edge cases people mess up

Decorative images

If an image is decoration only, use empty alt text:

<img src="/images/divider.svg" alt="">

That tells screen readers to skip it. Otherwise they read “divider” fifty times on a long page. It’s exhausting.

Linked images

If an image is a link, the alt text often becomes the link text. Make it meaningful:

<a href="/audit/">
  <img src="/images/button.png" alt="Run a free SEO audit">
</a>

Screenshots

For UI screenshots, include the screen name and the element that matters:

  • “GSC dashboard showing clicks and impressions trend for the last 28 days”

Don’t list every button. That’s not alt text, that’s a transcript.

How to audit alt text quickly

Two quick checks catch most issues:

  1. Missing alt: <img ...> with no alt attribute.
  2. Empty-but-not-decorative: alt="" on a chart or product image.

If you’re working on a site you don’t want to inspect manually, use a crawler-based audit. If you’re reviewing a single page fast, a browser extension is usually enough.

If you want the one-line definition, the glossary entry is here: Alt Text in the Glossary.

Privacy & Cookies

We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.