How to Write Good Alt Text (With 20 Examples)

Good alt text describes what an image is for, in context, using a short and specific phrase. It tells someone who cannot see the image what they would otherwise miss. If the image is purely decorative, good alt text is nothing at all: an empty alt="".

New to the topic? Start with What Is Alt Text?. This guide is the practical follow-up, with six rules and 20 before-and-after examples you can copy.

The six rules

1. Describe the purpose, not just the picture. Ask what a visitor would miss if the image disappeared, and say that.
2. Keep it short and specific. A phrase or one sentence is usually enough.
3. Skip “image of” and “photo of”. Screen readers already announce that it is an image.
4. Do not stuff keywords. Use a search term only where it truly describes the image.
5. Leave decorative images empty with alt="", so assistive technology skips them.
6. Match the context. The same photo can need different alt text on different pages.

Step 1: Work out what kind of image it is

The W3C’s accessibility guidance sorts images by purpose, and the right alt text follows from the type. Work through these questions in order:

1. Does it only add decoration or style? Use alt="".
2. Is it a link or a button? Describe where it goes or what it does, not what it looks like.
3. Does it contain text? Repeat the same words. A logo is the exception: use the brand name.
4. Is it a chart, graph or diagram? Give a short alt text, and put the full data or explanation in the page text next to it.
5. Otherwise, it is informative. Describe the essential information it shows.

Step 2: Think about context

Alt text depends on why the image is on the page. The W3C gives the example of a bird photo: on a park website, a brief description may be enough, while on a bird-watching site the exact species and markings could matter. Ask what the surrounding page is about and describe what is relevant to that.

20 alt text examples

The names and businesses below are made up for the examples. Swap in your own details.

Photos and illustrations

#	Image	Weak alt text	Better alt text
1	Harbor photo in a travel article	boats	Lobster boats moored in a calm harbor, with wooden traps stacked on the dock in front
2	Group photo on an About page	team	Four colleagues around a laptop reviewing a website crawl report
3	Staff headshot	headshot	Maria Santos, head of customer support
4	Storefront on a contact page	office	Front entrance of Dela Cruz Dental on Main Street
5	Illustration in a tutorial	illustration	Diagram of a browser sending a request to a server and getting HTML back

Products

#	Image	Weak alt text	Better alt text
6	Main product photo	IMG_2043.jpg	Blue ceramic coffee mug with a wooden handle
7	Colour variant	shoe color 2	Red trail running shoe with a white sole, side view
8	Detail shot	closeup	Close-up of the mug's glazed rim and where the handle joins the body

Links and buttons (functional images)

#	Image	Weak alt text	Better alt text
9	Magnifying glass button	magnifying glass	Search
10	Printer icon	printer icon	Print this page
11	Logo linking to the home page	logo	SeckRates home
12	LinkedIn icon in the footer	LinkedIn logo	SeckRates on LinkedIn
13	Cover image linking to a PDF	pdf	Download the 2026 pricing guide (PDF)

Text, screenshots and data

#	Image	Weak alt text	Better alt text
14	Banner containing text	promo banner	Free SEO audit: book by Friday
15	Screenshot of a tool	screenshot	Alt Text Checker results listing six images, two of them with missing alt text
16	Line chart	chart	Line chart: organic clicks grew from 1,200 in January to 3,400 in June
17	Infographic	infographic	Infographic of the five steps in a technical SEO audit, listed in full below the image

For the chart and the infographic, the alt text is only a summary. Put the real numbers or steps in a table or list on the page so everyone can read them.

Decorative images

#	Image	Weak alt text	Better alt text
18	Divider line between sections	divider	alt=""
19	Swirl behind a heading	swirl	alt=""
20	Stock laptop photo beside text that does not mention it	laptop on desk	alt=""

An empty alt="" is a deliberate choice. A missing alt attribute is not the same thing, because some screen readers then read out the file name instead.

Where do keywords belong?

Alt text can include a relevant keyword when it genuinely describes the image, and Google says it uses alt text along with the rest of the page to understand an image. That is a side benefit of writing it for people. Writing a keyword list, or repeating the page’s target keyword in every image, adds nothing for visitors and makes the page worse for screen reader users.

How long should alt text be?

There is no official limit. You will see advice to stay under about 125 characters, which is a common rule of thumb and not part of any standard. Write the shortest text that does the job. If an image needs a long explanation, put it in the page itself and keep the alt text brief.

A quick test before you publish

• Read the page aloud with the alt text in place of each image. Does it still make sense?
• Would you miss anything if you could not see the image? Is that in the alt text?
• Is any alt text just the file name, a keyword list, or a repeat of the caption right beside it?

Check your work on a real page

Once your alt text is written, paste the page into the Alt Text Checker to see every image with its thumbnail and alt text side by side, and to find images where the attribute is missing or empty. To scan a whole site, crawl it with the Page Audit Checker.

Common alt text mistakes

• Leaving the alt attribute off entirely.
• Using the file name, such as IMG_2043.jpg, as the alt text.
• Starting with “image of” or “picture of”.
• Stuffing keywords into the description.
• Describing a functional image by its looks instead of its action, such as arrow instead of Next page.
• Giving decorative images long descriptions that add noise for screen reader users.
• Copying the same alt text onto every image in a gallery.

Frequently asked questions

Should alt text include keywords?

Only when a keyword naturally describes the image. Write for the person who cannot see it, and the search benefit follows. Do not repeat a target keyword across images.

Should I start alt text with “image of” or “photo of”?

No. Screen readers already tell the listener that it is an image. Start with the description itself. The exception is when the type of image matters, such as Oil painting of a harbor at dusk.

What should the alt text be for a decorative image?

Empty: alt="". That tells assistive technology to skip the image, which is what you want for dividers, flourishes and other pure decoration.

What do I do with a photo gallery?

Treat each informative photo on its own and describe what is different about it. If several images together convey one single piece of information, the W3C advises having one image’s alt text carry the message for the whole group.

Can AI write my alt text?

It can draft it, but it cannot know why the image is on your page. Always read the result and edit it for context, accuracy and brevity, and replace generic descriptions with what matters on that page.

Is alt text required?

Text alternatives for images are required to meet the Web Content Accessibility Guidelines, under success criterion 1.1.1 at Level A. Whether it is legally required for your site depends on where you operate, so check the rules that apply to you.