Image ALT Text Best Practices: A Practical Guide for 2026

Posted on: June 24, 2026
A practical guide to writing image alt text for accessibility and SEO

Alt text is one of the smallest things you can add to an image, and one of the most overlooked. A single alt attribute decides whether a blind visitor understands your hero image, whether your page passes an accessibility audit, and whether Google can make sense of your visuals.

Yet most sites get it wrong. In the WebAIM Million 2026 survey of one million home pages, roughly one in four images had missing, questionable, or repetitive alt text. On a typical page with dozens of images, that adds up fast.

The good news: writing good alt text is a skill you can learn in an afternoon. Here is a practical guide for designers, marketers, and site owners in 2026.

What alt text actually does

Alt text (the alt attribute on an <img> element) is a written substitute for an image. It quietly does three jobs at once:

  • Accessibility. Screen readers announce the alt text in place of the image, so blind and low-vision visitors get the same information sighted users do. It can be read aloud or sent to a Braille display.
  • Resilience. If the image fails to load, is blocked, or sits on a slow connection, the browser shows the alt text instead.
  • SEO. Search engines use alt text, alongside the surrounding page content, to understand what an image shows and rank it in image search.

The mental model every accessibility expert returns to is simple: what information would someone miss if they could not see this image? Describe that, not what the picture looks like.

The core rules

Good alt text follows a handful of rules that hold up across almost every situation:

  • Describe content and function. Say what the image means in context. If it is a link or button, describe the action or destination, not the picture.
  • Be concise, lead with the important part. Aim for the most useful description in the fewest words, and front-load the key information.
  • Skip "image of" and "picture of." Screen readers already announce that it is a graphic, so the prefix is redundant noise.
  • Let keywords appear naturally. If a relevant keyword genuinely describes the image, it belongs there. Never insert keywords just to rank.
  • Do not repeat nearby text. If a caption or paragraph already conveys the image's meaning, an empty alt="" is usually the right call.

About that "125 character limit": you will see it everywhere, and as a hard rule it is a myth. WCAG sets no length limit at all; the figure traces back to a quirk in how the JAWS screen reader splits long alt text into chunks, which got misread as truncation. There is no technical cap and nothing breaks past 125 characters.

That said, ~125 characters is a sound practical ceiling to aim for. Treat it as a target, not a wall: roughly one to two short sentences, enough to describe most images well. Keep alt concise for usability, since a screen-reader user cannot pause or re-read within it. If you genuinely need more than that, the image is probably complex, so give it a short alt plus a long description nearby instead of stretching the alt.

Decorative, informative, and functional images

Not every image needs a description. The first decision is what kind of image you are dealing with.

  • Decorative (background flourishes, dividers, mood photos that add nothing factual): use an empty alt="" so assistive tech skips it. Better still, serve purely decorative images through CSS backgrounds.
  • Informative (a product photo, a screenshot, a chart): write a brief description that conveys the meaning the image adds.
  • Functional (an image used as a link or button): describe the action or destination. A magnifying-glass icon that submits a search is alt="Search", not "magnifying glass". An icon sitting next to text that already labels the link gets alt="".

One rule never bends: always include the alt attribute, even when it is empty. Omitting it entirely is a bug. Some screen readers respond by reading the file name aloud ("IMG_4471.jpg"), and the image gets treated as meaningful content rather than decoration.

Complex images: charts and infographics

Charts, graphs, infographics, diagrams, and maps carry more information than a short phrase can hold. The standard approach is two-part: a short alt that identifies the image, plus a longer description nearby that carries the full data.

For that long description, use modern HTML: a visible caption with <figure> and <figcaption>, a linked or expandable text block, or aria-describedby. Do not use longdesc. It is obsolete, non-conforming in the HTML spec, and was never well supported.

WCAG 1.1.1 in plain English

Alt text is governed by a single accessibility rule: WCAG Success Criterion 1.1.1, Non-text Content (Level A). The wording is identical across WCAG 2.0, 2.1, and 2.2.

In plain terms, it requires that all non-text content has a text alternative serving the equivalent purpose. For an informative image that means a real description. For a decorative image it means an alternative that lets assistive tech ignore it, which is exactly what alt="" does. Level A is the baseline tier, so this is non-negotiable for any site claiming basic accessibility conformance.

Common mistakes

Most alt-text problems fall into a short list of repeat offenders:

  • Keyword stuffing. Cramming keywords into alt hurts screen-reader users and, per Google, can make your site look like spam.
  • "Image of" / "graphic of" prefixes. Redundant, since the screen reader already says so.
  • Missing alt versus empty alt. Missing is ambiguous and triggers the file-name read-out; empty is a deliberate "skip this" signal. But empty alt on a functional image (a linked image) is a real failure that leaves the link unlabeled.
  • Duplicating the caption. If the caption already says it, repeating it in alt makes the screen reader announce it twice. Avoid putting the same string in both alt and title for the same reason.
  • Meaning trapped in CSS backgrounds. Background images expose no alt and are invisible to assistive tech, so never put information-bearing visuals there.

Alt text for SEO

Google is explicit that alt text is the most important attribute for image understanding. From its Image SEO guidance:

  • Write useful, information-rich alt text that uses keywords in context, the same advice as for accessibility.
  • Use descriptive file names: blue-running-shoe.jpg beats IMG00023.JPG. Separate words with hyphens, not underscores.
  • Place images near relevant text; Google reads surrounding content and captions to understand the subject.
  • Avoid keyword stuffing. Google names it as a spam risk in the same document.

The honest synthesis: describe the image accurately, and the relevant keywords show up on their own. Accessibility and SEO want the same thing here.

Using Claude to write alt text

Writing alt text for a whole site by hand is tedious, which is exactly why so much of it ends up missing or lazy. A vision-capable AI model like Claude can look at an image and draft solid alt text in seconds, as long as you give it the context it can't see.

The catch: a model only sees the pixels. It does not know where the image sits on the page, whether it's a link, or what the surrounding copy already says. Good alt text is context-dependent, so your prompt has to supply that context.

A basic prompt:

Write alt text for this image.
Rules:
- Describe the content and meaning, not the appearance.
- One concise sentence, ideally under 125 characters. No "image of" or "photo of".
- Plain, factual tone. No keyword stuffing.
Return only the alt text, nothing else.

A context-aware prompt (better results):

You are writing alt text for a web page.

Context:
- Page topic: [e.g. a case study on a hotel website redesign]
- Where the image appears: [e.g. hero banner / inline figure / nav icon]
- Is it a link or button? [yes - links to the live site / no]
- Nearby caption or text: [paste it, or "none"]

Write the alt text following these rules:
- Convey what a non-sighted visitor would need to know in context.
- If it's decorative or its info is already in the nearby text, return: alt=""
- If it's a link/button, describe the destination or action, not the picture.
- Keep it concise (aim for under 125 characters); lead with the most important detail.
- No "image of", no keyword stuffing.

Return only the alt attribute value.

Batch prompt for a set of images: attach several images at once and ask for a table.

For each image I've attached, return a row:
| filename | type (decorative / informative / functional) | suggested alt |

Use alt="" for decorative images. Keep each description under one sentence.

Tips for getting it right:

  • Always give context. The same photo needs different alt text in a hero versus a thumbnail versus a link. Tell the model which.
  • Let it flag decorative images. Ask it to return alt="" when an image adds no information. Otherwise it will over-describe everything.
  • Review every output. Treat the draft as a first pass. The model can hallucinate details (a wrong brand name, an invented number), so verify against the real image.
  • Constrain the format. "Return only the alt text" saves you from pasting away explanatory chatter.
  • Feed it the page copy. Pasting the surrounding paragraph helps it avoid duplicating the caption and pick a complementary description instead.
  • Don't let it stuff keywords. If you mention SEO, add "describe accurately; keywords only if they genuinely fit" so it doesn't pad the text.

Used this way, Claude turns alt text from a chore you skip into a 30-second step you actually finish, with a human keeping the final say.

Quick checklist

Run every image through this before you publish:

  • Is it purely decorative? Use alt="" (or a CSS background).
  • Is it a link or button? Describe the action or destination, not the picture.
  • Does it contain text? Put the same words in the alt.
  • Is it a chart or infographic? Short alt plus a long description nearby, never longdesc.
  • Is the info already in adjacent text? Use alt="" and don't duplicate it.
  • Otherwise, write one concise phrase describing the meaning the image adds.
  • Keep it short: aim for ~125 characters or less (one to two short sentences).
  • Every <img> has an alt attribute, even empty ones.
  • No "image of", no keyword stuffing, no file-name leftovers.
  • Descriptive, hyphenated file names.

If you would like a second pair of eyes on your site's images and accessibility, grab a free audit and we'll flag what's missing.

Sources