Image alt text: good vs bad examples and when to skip it

Image alt text is a short written description in an image's HTML that tells screen readers and search engines what the picture shows and why it is on the page. Good alt text is usually one or two sentences long and tied to the content around it. Purely decorative images get an empty alt attribute instead.

That small field does a lot of work. HubSpot reports that nearly 19% of Google's results pages show images, so a missing description costs you readers and traffic. Below you'll find how to write one and when to leave it blank, with real examples for each image type.

What image alt text does, and who relies on it

Alt text lives in the alt attribute of an image tag. Most visitors never see it. Three groups depend on it.

Screen reader users

People with vision disabilities often use a screen reader, which reads the page aloud. When it reaches an image, it reads the description instead. Without one, the image is a gap. If the image is a button or a link, the user may not know what it does.

Accessibility rules have asked for this for a long time. In 1999, the W3C's Web Content Accessibility Guidelines 1.0 told publishers to "provide equivalent alternatives to auditory and visual content." Today it is a requirement in the US government's Section 508 guidance on alternative text.

Anyone whose image fails to load

A slow connection or a broken file path can stop an image from loading. The browser then shows the description in its place. The reader still learns what the picture was meant to show, instead of staring at a broken image icon.

Search engines

Search engines can't look at a photo the way you do. They read the description, along with the text around the image, to work out what it shows. That decides whether it appears in Google Images or in the row of image results on a normal search page. Pinterest works the same way and uses the text to match Pins to searches.

How to write alt text: a six-step checklist

No special tool is needed for this, and once you know what to look for, most images take very little time.

1. Ask why the image is on the page. Harvard's accessibility guide puts it simply: focus on why you chose the image. The small details can usually go.
2. Lead with the subject. Name the people and places when they matter. "Harvard's Memorial Church with grand columns and hanging banners" tells you far more than "a church."
3. Keep it to one or two sentences. Long descriptions tire listeners, so if an image needs more, put the detail in the page text instead.
4. Skip "image of" and "picture of." Screen readers already announce that an image is there, though you should say when it is a logo, illustration, painting or cartoon, because that changes the meaning.
5. Don't repeat the text next to it. If the caption already says it, yours should add something or stay brief.
6. Match the page's language and punctuation. A Spanish page needs Spanish descriptions. Write full sentences and end each one with a period, as Harvard's guide recommends.

Context changes the right answer

The same photo can need different alt text on two pages. Harvard's guide uses a shot of Hollis Hall in Harvard Yard. On an article titled "Spring is Here!", about students enjoying the weather, it reads: "Students lounge and work in brightly colored Luxembourg chairs in Harvard Yard." On a page about the building's history, the chairs would matter less than the hall itself.

Alt text examples for common image types

Each image type asks a different question: a photo needs its subject and an icon needs its action, while a chart needs the point its numbers make. The better versions in the table come from the Harvard and Section 508 guides, and the weak ones show habits worth dropping.

Image type	What to cover	Weak alt text	Better alt text
Photo of a known person	The person's name, as the page needs it	"Black and white photo of Dr. Martin Luther King Jr. wearing a suit and tie."	"Dr. Martin Luther King Jr."
Group photo	Who is in it and what they are doing	"Students outside"	"Group of young college students laugh and walk along a tree-lined pathway."
Logo	The organization and any logo text, word for word	"Logo"	"GSA logo with text: Section508.gov Buy. Build. Be Accessible."
Action icon	The action the icon triggers	"Printer icon"	"Print the Weekend Event Schedule."
Linked icon	Where the link goes	"Instagram logo"	"Visit the Harvard Library Instagram."
Required-field symbol	What the symbol means	"Asterisk"	"Required"
Bar chart	Chart type, the trend and where the full data lives	"Event sales graph"	"Bar chart of event sales for Monday through Friday. Amounts for ticket, food, and merchandise sales show a slight decline from Monday to Wednesday, with a dramatic increase to a peak on Friday. Table 1 further details the event sales by category."

Charts and diagrams

For a chart, open with the chart type, such as "Bar chart" or "Pie chart." Then give the trend and the key numbers. Harvard's guide describes a GDP map this way: "World Map of GDP per country in the Trillions. From most to least: US $20, China $13, Japan $5, Germany $4, India $2.80, UK $2.80, France $2.70, Brazil $2.10, Italy $2, and Canada $1.70."

When a chart holds more data than two sentences can carry, keep the description short. Put a data table or a longer write-up below the image instead. Section 508 recommends that approach.

Images that contain text

When an image carries words, include them word for word. A cartoon in Harvard's guide gets both the scene and the caption: a job interviewer facing a candidate with a long white beard, and the line "Mr. Crusoe, I'm concerned about this 20 year gap in your resume." Section 508 goes further and suggests keeping text out of images when you can, and typing it on the page instead.

Logos, icons and links

Section 508 says logos are never decorative, so every logo needs a description. For icons, describe the job the icon does. HubSpot gives the example of an upward arrow that jumps to the table of contents, which should read "Go to table of contents." A linked icon should say where it leads.

When to leave the alt attribute empty

Some images carry no information. Dividers and spacers belong here, along with photos placed purely for looks. For these, add an empty attribute: alt="". A screen reader then skips the image.

Don't delete the attribute. W3Schools lists alt as a required attribute on the image tag. Section 508 warns that when an image has no alt text and isn't marked decorative, a screen reader may read out the file name. A string of letters and numbers helps nobody.

Arrows are a common edge case. If a link already says "Next," the arrow beside it is decorative and should be empty. If the arrow is the only thing in the button, it needs a description such as "Next."

A quick test works for most images. If you removed it, would the reader lose any information? If not, leave it empty.

How image alt text affects SEO

A clear description is one of the plainest signals you can give a search engine about an image. It helps the image show up in Google Images and in image packs. Those are the rows of pictures that can sit in any position on a results page, the first one included.

What it has done for real sites

HubSpot's blog team began optimizing its image descriptions in 2018 as part of a wider SEO push. The company says its image traffic rose 779% in less than a year, which brought 160,000 more organic views. Alt text wasn't the only change, but it was a named part of the plan.

Where keywords fit

Use your target keyword when it honestly describes the image, and leave it out when it doesn't. HubSpot's own example shows the difference. This version stuffs terms in:

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

This one describes the picture:

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

The second reads like a sentence and still names the brand and the place. The first reads like a tag cloud, and HubSpot warns that Google penalizes keyword stuffing. Tailwind gives the same advice for Pinterest: treat alt text as an accessibility feature first and a search factor second.

Descriptions also work best alongside the rest of your image setup, such as file size and load time. The steps for those are in this guide to smaller image files and higher rankings.

Alt text vs title, caption and file name

People mix these four up all the time, and only one of them is written for someone who can't see the image.

Element	Who sees it	What it is for	Can it replace alt text?
Alt attribute	Screen reader users, search engines, and anyone whose image fails to load	Stating what the image means on the page	Yes
Title attribute	Mouse users hovering over the image	A tooltip	No
Caption	Every visitor, as visible text under the image	Context everyone can read	No, and the alt text should not repeat it
File name	Search engines, and screen readers when alt text is missing	Naming the file	No, a file name is a poor description

How to add alt text in WordPress, HubSpot and HTML

Most content systems put the field one click away from the image.

• WordPress: click the image to open the Block tab in the sidebar. Type the description in the alt text field under Image Settings, then click Update.
• HubSpot: click the image, then the pencil edit icon, and an image optimization pop-up opens with the field inside it.
• Plain HTML: add the attribute to the image tag, for example alt="Dr. Martin Luther King Jr.".
• Office files and PDFs: documents need descriptions too, and Section 508's page links to step-by-step guides for each format.

Whatever system you use, check the live page once. View the page source and search for alt= to confirm your text made it through.

Can AI write your alt text for you?

It can write a first draft. Free tools such as Tailwind's generator look at an uploaded image and describe it in a sentence. For a store with thousands of product photos, that saves real time.

But AI only sees the pixels. It has never read your page. It can say "two people shaking hands in an office." It can't know that they are your founder and a new partner, or that the photo sits on a page about the deal. Some generators are also built to produce "keyword-rich" copy, which is the habit to watch for.

A sensible split:

• Write it yourself for anything with names, data or text in it, such as team photos and charts.
• Use AI drafts for large batches of simple product or stock images, then read each one before publishing.
• Get help when the site is too big to find the gaps by hand, or when you must meet a standard such as Section 508.

If you're fixing descriptions as part of a wider image cleanup, pair it with the speed work in optimizing images for SEO without slowing your site.

FAQs

How long should image alt text be?

One or two sentences covers most images. Harvard's accessibility guide recommends keeping it short, and Tailwind suggests one sentence, with a second only when you need it. A complex chart can carry a short summary in the attribute and the full data in a table on the page.

Does every image need alt text?

Every image needs an alt attribute, but not every image needs a description. Images that carry information need one. Purely decorative images should use an empty attribute, alt="", so screen readers skip them.

Does alt text help with Google rankings?

It helps search engines understand your images, which can bring traffic from Google Images and image packs. HubSpot credits alt text work as part of a strategy that grew its blog's image traffic by 779% in under a year.

Should I put keywords in my alt text?

Only when the keyword truly describes the image. A natural phrase such as "orange mural at HubSpot's Singapore office" is fine. A string of loosely related terms makes the text useless to screen reader users and can count as keyword stuffing.

What is the difference between alt text and a caption?

A caption is visible to everyone. Alt text is read by screen readers and shown when an image fails to load, so it reaches the people a caption can't. If you copy one into the other, screen reader users hear the same words twice.

Get your images checked in a full site audit

Fixing image alt text on a few pages takes minutes, but finding every missing description across a site with hundreds of pages is where the hours go. Look through our sample SEO report to see how an audit lays out its findings, then talk to the team about running one on your site.

Resources / References

1. Section 508 guidance on alternative text
2. Harvard's accessibility guide
3. HubSpot's own example

Sources

• Write helpful Alt Text to describe images - Digital Accessibility
• Free Image Alt Text Generator
• HTML img alt Attribute
• Authoring Meaningful Alternative Text
• Image Alt Text: What It Is, How to Write It, ... - HubSpot Blog

Disclaimer: This article is general information about rules and figures that applied when it was written, not personalised financial, tax or investment advice. It does not take account of your income, obligations, risk tolerance or goals, and rates and thresholds change. Verify the current position with the relevant authority, and speak to a licensed adviser or a qualified accountant before acting.