How to Write Image Alt Text for SEO and Accessibility

Good alt text is a short, plain description of what an image means in its context, and for purely decorative images it's an empty alt="". Write it for a person who can't see the image, not for a search engine, and you'll cover both accessibility and SEO at once.

What is alt text, and who actually uses it?

Alt text is the text alternative for an image, set with the alt attribute on <img>. Three groups rely on it:

• Screen reader users. Their software reads the alt text aloud in place of the image.
• Anyone whose images don't load. Slow connections, blocked hosts, broken URLs. The browser shows the alt text instead.
• Search engines. Google uses alt text, along with the surrounding page, to understand what an image shows. We cover the ranking side in our post on getting images into Google Images.

Notice that the first two groups are people. That's the right order of priority. Alt text that works well for a screen reader user almost always works well for Google too. The reverse isn't true.

How do you decide what alt text an image needs?

The W3C Web Accessibility Initiative (WAI) publishes an alt decision tree. It's the most useful tool for this job, because the right alt depends on what the image is doing on the page, not on what it looks like. Here's the short version, in the order you should ask the questions:

1. Does the image contain text? If the same text is right next to it, use alt="". If the text is only there for visual effect, use alt="". If it's an icon with a function, describe the function. If the text only exists in the image, put that text in the alt.
2. Is it inside a link or button, and would the link make no sense without it? Then the alt should say where the link goes or what the button does.
3. Does it add meaning to the page? A simple photo or graphic gets a brief description. A chart or diagram needs its information provided elsewhere on the page too. If it just repeats nearby text, use alt="".
4. Is it purely decorative, or not meant for users at all? Use alt="".

If none of these fit, the WAI images tutorial covers edge cases like image maps and groups of images. Most images on most sites land in steps 2 or 3.

When should you use an empty alt=""?

Use alt="" when the image adds nothing a listener would miss. Think background flourishes, divider graphics, spacer images, and photos that sit next to a caption saying the exact same thing.

An empty alt tells assistive tech to skip the image. MDN puts it plainly: an empty string means the image is "not a key part of the content." That's a feature. Nobody wants to hear "decorative swoosh graphic" read aloud ten times per page.

Don't confuse an empty alt with a missing one. If you leave the attribute out entirely, many screen readers fall back to reading the file name. That's how users end up hearing "IMG underscore 4 0 2 7 dot jpeg." Always include the attribute, even when it's empty.

<!-- Decorative: skip it -->
<img src="/img/divider-wave.svg" alt="">

<!-- Missing alt: screen readers may read the file name -->
<img src="/img/divider-wave.svg">

What alt text should a linked image or button have?

When an image is the only content of a link or button, it's a functional image. Its alt text becomes the link's name. So describe what happens when you click, not what the picture looks like.

The classic case is a logo linking to the home page. The alt should be something like "Acme home," not "Blue and orange Acme logo with a stylized bird." A magnifying-glass button should say "Search." A printer icon should say "Print this page."

<a href="/">
  <img src="/img/logo.svg" alt="Acme home">
</a>

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

If the link already has visible text next to the image, the image is redundant. Give it alt="" so the link name isn't read twice.

The same thinking applies to small UI icons, including the favicons some sites show next to external links or in site switchers. We walk through those cases in our guide to accessible favicons and icons. Icons delivered as SVG have their own labeling rules, which our post on SVG images on websites covers.

What about images of text?

If an image shows words, the alt text should usually contain those words. A banner that says "Spring sale: 30% off all plans" should have that exact phrase as its alt. Don't describe the font or the colors. Nobody needs "white bold text on a green gradient."

A better fix is to avoid images of text where you can. Real HTML text scales, translates, and can be searched. It also stays sharp on high-density screens without extra files. If a designer insists on a text graphic, at least make sure the alt matches it word for word.

How do you write alt text for charts and complex images?

A chart holds too much for one short line. The WAI complex images tutorial says to use a two-part text alternative:

1. A short alt that names the image and its subject. For example: "Bar chart of monthly visitors, Q1, for three sites."
2. A long description somewhere on the page. That can be a paragraph right after the chart, a data table, or a <figcaption> inside a <figure>.

The long description should carry what the chart shows: the scales, the key values, and the trend. "Site 2 roughly doubled its traffic from January to March, while sites 1 and 3 stayed flat" is useful. "A chart with colorful bars" isn't.

Here's a practical aside. If you already have the data in a table on the page, you've done most of the work. Many teams find a table helps sighted readers too, since exact numbers are hard to read off a bar.

How long should alt text be?

There's no hard limit in the HTML spec or in Google's documentation. You'll see "125 characters" repeated online, but that's a rule of thumb based on how some older screen readers handled long strings, not a standard.

A better test is this: read your alt text out loud in the middle of the sentence around it. Does it fill the gap without dragging? Most informative images need somewhere between a few words and one sentence. If you need more than two sentences, you probably have a complex image and should use a long description instead.

Should alt text start with "image of" or "photo of"?

No. Screen readers already announce that an element is an image. Starting with "image of" makes users hear it twice. MDN's own example shows alt="image" as the thing not to do.

There's one fair exception. If the medium matters, say so. "Oil painting of a harbor at dusk" or "Screenshot of the Search Console coverage report" tells the reader something real. "Photo of a dog" doesn't, unless the fact that it's a photo is the point.

Does alt text help SEO, and how much?

Yes. Google's image SEO guidance says it uses alt text together with computer vision and the page's content to understand an image. Good alt helps your images show up in Google Images, and it helps Google understand the page when an image is a link.

But Google also warns against overdoing it. In its own words, filling alt attributes with keywords "results in a negative user experience and may cause your site to be seen as spam." Their example of good alt text is simply "Dalmatian puppy playing fetch."

So write the honest description first. If your target phrase fits naturally, great. If you have to force it, leave it out. The page title, file name, captions, and nearby text all do SEO work too, so the alt doesn't have to carry everything.

Alt text examples: bad vs. good

Common mistakes

• Leaving out the attribute. Missing alt is worse than empty alt. Some CMS image blocks drop it silently, so check your rendered HTML.
• Using the file name. Plugins sometimes auto-fill alt from the upload name. "hero-final-v3-crop" helps no one.
• Describing the logo instead of the link. This one is everywhere, especially in site headers.
• Same alt on every image. Galleries often reuse the product name on all 12 shots. Say what's different: "back view," "sole detail," "on foot."
• Keyword stuffing. It reads badly out loud, and Google flags it as a spam signal.
• Putting key info only in the title attribute. Tooltips don't show on touch screens, and screen readers handle title inconsistently. Use alt.
• Forgetting CSS background images. They can't have alt text at all. If an image carries meaning, it belongs in an <img> tag.

How do you audit alt text on an existing site?

1. Crawl the site or run Lighthouse on key templates. Lighthouse flags images with no alt attribute.
2. Export a list of image URLs with their alt values. Sort by alt text to spot duplicates and file-name junk.
3. Check templates first: headers, footers, product cards, author boxes. Fixing one template can fix thousands of pages.
4. Turn on a screen reader (VoiceOver on Mac, NVDA on Windows) and listen to one page start to finish. You'll hear problems a tool can't catch.

While you're auditing templates, it's a good moment to check that images also have width and height set to prevent layout shift. Same tags, same pass.

One image type never needs alt text: your favicon. It's declared with a link tag in the head, not an img, so there's nothing to describe. What it does need is to stay readable at 16 pixels, which is easier to get right if you make your favicon from a simple, high-contrast mark.

TL;DR

Write alt text that says what the image means in context, in as few words as work. Use alt="" for decorative images, describe the action for linked images and buttons, copy the text for images of text, and pair charts with a longer description on the page. Skip "image of" and don't stuff keywords, since Google treats that as spam.

Sources

• W3C WAI: An alt Decision Tree
• W3C WAI: Complex Images
• Google Search Central: Image SEO best practices
• MDN: The Image Embed element