Alt Text Writing Guide: 12 Examples of Good and Bad Image Descriptions

Alt text is easy to write badly and surprisingly easy to write well

Most websites we audit at Zach’s Web Designs have the same problem: the alt text field is either empty, stuffed with keywords, or filled with something useless like “image1.jpg”. None of those help a screen reader user, and none of them help Google understand your page. Good Alt Text, Bad Alt Text tackles the same question from another angle.

This guide is built around alt text examples you can copy and adapt today. For every image type on a typical business website (product photos, logos, charts, icons, decorative backgrounds, team shots, linked images) you get a weak version, a strong version, and the reason one works and the other does not.

No theory dumps. Just what to type in that box.

The 30-second rules before the examples

Every good alt text follows the same handful of rules. Learn these and the examples below will make immediate sense.

1. Describe the purpose, not just the pixels. Ask yourself: why did I put this image on the page? Describe that.
2. Skip “image of”, “photo of”, “graphic of”. Screen readers already announce that it is an image. “Image of an apple” is read aloud as “image, image of an apple”.
3. Keep it under roughly 125 characters. Many screen readers cut off longer strings, and long alt text is exhausting to listen to.
4. Use real sentences and punctuation. A comma or full stop makes the screen reader pause naturally.
5. Never keyword stuff. “web design agency web design services best web design” is a spam signal and a terrible listening experience.
6. Purely decorative? Leave it empty with alt="" so assistive tech skips it. Empty is not the same as missing.
7. If the image is a link, the alt text must describe the destination, not the picture.
8. Do not repeat the caption. If a caption already says it, the alt text should add something else or stay empty.

12 alt text examples: weak vs effective

Each example below is a real pattern we see on client sites. The “better” column is what we would actually publish.

1. Product photo (e-commerce)

Weak alt text	Better alt text
alt="shoes"	alt="Tan leather Chelsea boot with elastic side panel and crepe sole"

Why: Shoppers who cannot see the image still need colour, material and the details that drive a buying decision. “Shoes” tells them nothing and ranks for nothing.

2. Second product angle (same product, multiple images)

Weak alt text	Better alt text
alt="Tan leather Chelsea boot" (identical on all 5 photos)	alt="Sole view of the tan Chelsea boot showing the grooved crepe tread"

Why: Repeating the same string five times creates five identical announcements. Each angle should say what is new in that shot.

3. Company logo in the header (linked to homepage)

Weak alt text	Better alt text
alt="logo" or alt="Zach's Web Designs logo blue circle icon vector"	alt="Zach's Web Designs home"

Why: A header logo is a link. The user does not care what the logo looks like, they care where clicking it goes. On a logo that is not a link (for example a client logo in a testimonial strip), use alt="Acme Corporation" instead.

4. Decorative background image

Weak alt text	Better alt text
alt="abstract blue gradient background texture design"	alt=""

Why: A gradient behind your hero headline carries zero information. Announcing it is noise. Empty alt tells the screen reader to move straight to the headline. Better still, load it via CSS so it never enters the HTML at all.

5. Icon next to text that says the same thing

Weak alt text	Better alt text
alt="phone icon" next to the visible text “Call us: 555-0134”	alt=""

Why: The information is already in the text. Describing the icon makes the user hear the same idea twice. This is the single most common accessibility mistake on small business sites.

6. Functional icon with no visible label

Weak alt text	Better alt text
alt="magnifying glass"	alt="Search"

Why: Function over appearance. The same applies to a hamburger icon (alt="Open menu"), a cart icon (alt="View cart, 3 items") and a checkbox graphic (alt="Checkbox checked").

7. Chart or graph

Weak alt text	Better alt text
alt="sales chart 2026"	alt="Bar chart: monthly sales rose from 12k in January to 41k in July 2026. Full figures in the table below."

Why: A chart exists to communicate a trend. Say the trend, then point to a data table, caption or paragraph containing the actual numbers. Do not try to read out 24 data points inside the alt attribute.

8. Infographic or image with text baked in

Weak alt text	Better alt text
alt="infographic"	alt="Infographic: the 5 stages of our website build process, listed in full below the image"

Why: Any text inside an image is invisible to screen readers and, in practice, to Google too. Repeat the content as real HTML text beneath it and keep the alt short.

9. Team or staff photo

Weak alt text	Better alt text
alt="IMG_4471"	alt="Sarah Klein, lead developer, at her desk reviewing code on two monitors"

Why: File names are never acceptable alt text. If a name is already in a visible caption, you can shorten to alt="Sarah Klein at her desk" or leave it empty.

10. Stock photo used purely as article decoration

Weak alt text	Better alt text
alt="business people meeting corporate teamwork success"	alt="Two marketers reviewing website analytics on a laptop"

Why: The weak version is keyword soup. The better version describes what is actually happening and still naturally contains relevant terms. Context matters: on a page about analytics reporting, that description is genuinely on topic.

11. Image used as a call-to-action button

Weak alt text	Better alt text
alt="orange button"	alt="Book a free website audit"

Why: Again, destination over decoration. And ideally, do not build buttons out of images at all.

12. Thumbnail linking to an article or video

Weak alt text	Better alt text
alt="thumbnail"	alt="" (when the linked headline sits right next to it)

Why: If the thumbnail and the headline are inside the same link, giving the image alt text makes the screen reader read the link twice. Let the headline do the talking. If the thumbnail is the only link, use alt="Watch: how we cut load time by 60% on a Shopify store".

Quick reference: what to write for every image type

Image type	Alt text approach	Typical length
Product photo	Product name plus the distinguishing visual detail	8 to 15 words
Logo (linked)	Brand name plus destination	2 to 5 words
Logo (not linked)	Brand name only	1 to 3 words
Decorative / background	Empty alt="", or move to CSS	0
Functional icon	The action it performs	1 to 4 words
Icon beside identical text	Empty alt=""	0
Chart or graph	Chart type plus the takeaway, data provided nearby	15 to 25 words
Infographic	Short summary plus pointer to the text version	10 to 20 words
Screenshot / tutorial step	The interface state or the step being shown	10 to 20 words
Image link / CTA	Where it goes or what it does	3 to 8 words
Team photo	Name, role, and what they are doing	6 to 15 words
Photo already explained by a caption	Empty alt="" or a non-duplicate detail	0 to 10 words

How long should alt text be?

There is no hard limit in the HTML spec, but there is a practical one. Some screen readers truncate around 125 to 150 characters, and listening to a 60-word description is genuinely tiring. section508.gov published something useful on the subject.

• Sweet spot: 8 to 16 words, roughly 60 to 125 characters.
• Hard ceiling: about 125 characters for a normal image.
• Need more? The image is complex. Write a short alt text and put the full explanation in visible page text, a caption, an expandable panel or a linked long description.

A useful test: read the alt text out loud. If you run out of breath or lose the thread, it is too long.

The empty alt attribute, explained properly

This trips people up constantly, so here is the distinction in plain terms.

Markup	What a screen reader does
<img src="swirl.png" alt="">	Skips it silently. Correct for decoration.
<img src="swirl.png">	May read out the file name: “swirl dot p n g”. Bad.
<img src="swirl.png" alt=" ">	A space is not empty. Behaviour is unpredictable. Avoid.

Use empty alt when: the image is a spacer, a border, a pattern, a background flourish, an icon duplicating adjacent text, or a photo whose meaning is fully covered by a nearby caption.

Never use empty alt when: the image is a link, a button, a chart, a product shot, or contains text the user needs.

Does alt text actually help SEO?

Yes, but not in the way keyword-stuffers hope. Google uses alt text to understand image content, which feeds Google Images rankings and adds contextual signals to the page. It also acts as fallback text when an image fails to load.

Practical guidance:

1. Write for a human listener first. Relevant keywords will appear naturally because you are describing a relevant image.
2. Include your target term in one or two key images per page at most, and only where it genuinely describes the picture.
3. Name your files descriptively too: tan-chelsea-boot-side.jpg beats IMG_4471.jpg.
4. Pair alt text with a caption when the image deserves extra context. Captions are visible to everyone and get read more than body copy.
5. Do not repeat the exact same alt string across dozens of images. It looks templated because it is.

Is alt text legally required?

In most jurisdictions the law does not name “alt text” specifically, it requires that your website be accessible. Missing text alternatives is one of the most cited failures in accessibility complaints and lawsuits.

• WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) is a Level A requirement, the baseline. Missing alt text fails it outright.
• In the United States, ADA-related web claims routinely reference WCAG, and Section 508 applies to federal agencies and their contractors.
• In the European Union, the European Accessibility Act obligations came into effect in June 2025 and cover many private sector e-commerce and service websites.
• In the UK, the Equality Act 2010 covers digital services, with public sector bodies under additional regulations.

Short version: if you sell or serve online, treat alt text as mandatory rather than optional. This is general information and not legal advice, so check your own obligations.

A 20-minute alt text audit you can run today

1. Start with money pages. Homepage, top three product or service pages, contact page.
2. Run a free checker. WAVE, axe DevTools or Lighthouse will flag missing and suspicious alt attributes in seconds.
3. Sort every flagged image into three buckets: informative, functional, or decorative.
4. Write informative ones first using the table above. These affect conversions and rankings most.
5. Fix functional images next. Broken icon labels block people from completing tasks.
6. Set decorative ones to alt="". Fast wins, big noise reduction.
7. Turn on a screen reader and listen. VoiceOver on Mac and iOS, NVDA on Windows, TalkBack on Android. Five minutes of listening teaches more than any checklist.
8. Add it to your publishing checklist so the backlog never rebuilds.

Should you use an AI alt text generator?

AI tools have improved a lot and they are a reasonable starting point for large image libraries. They are decent at literal description and poor at intent. An AI will happily label your header logo “blue circular emblem with lettering” when the correct answer is “Zach’s Web Designs home”.

Our recommendation: generate drafts in bulk, then human-review anything on a page that earns money. Always review logos, charts, CTAs and product photos manually.

Common mistakes worth one final look

• Starting with “Image of” or “Picture showing”.
• Pasting the page title into every image.
• Leaving WordPress default file names in place.
• Writing alt text for a background image that should live in CSS.
• Duplicating the caption word for word.
• Cramming three keywords into one description.
• Forgetting alt text on images inside sliders, popups and page-builder modules, where the field is often hidden under an extra tab.

FAQ

What should my alt text say?

It should say what the image communicates in the context of that page. For a product, describe the product and its key visual features. For a link or button, describe where it goes. For a chart, state the trend. For decoration, say nothing and use alt="".

How long should alt text be?

Aim for 8 to 16 words, staying under about 125 characters. Anything longer belongs in visible page text or a caption.

Do I need alt text on every single image?

Every <img> element needs an alt attribute. It does not always need content inside it. Decorative images get alt="", which is a deliberate, valid choice.

What is the best alt text for a logo?

If the logo links to the homepage, use the brand name plus destination, such as “Zach’s Web Designs home”. If it is not a link, just the brand name. Never write “logo” on its own and never stuff it with keywords.

How do I add alt text in WordPress?

Click the image in the block editor, open the Settings sidebar, and fill the “Alternative text” field. You can also edit it in the Media Library for every image at once, which updates future insertions but not images already placed on pages.

Is alt text the same as a caption or a title attribute?

No. Alt text is the text alternative read by assistive technology. A caption is visible text below the image for everyone. The title attribute produces a hover tooltip, is inconsistently supported and is invisible on touch devices, so do not rely on it.

Does alt text help my Google rankings?

It helps Google understand and rank your images, and it contributes context to the page. It is a supporting signal rather than a shortcut. Descriptive, honest alt text wins over keyword-stuffed alt text every time.

What about alt text on Instagram and social platforms?

Same principles, different field. Instagram lets you add alt text under advanced settings before posting, LinkedIn and X have their own equivalents. Describe the image plainly and skip the hashtags. The topic gets a thorough treatment elsewhere.

Need someone to fix this for you?

If your site has hundreds of images and no alt text strategy, an audit is usually faster and cheaper than you expect. At Zach’s Web Designs we run accessibility and image SEO audits that give you a prioritised, page-by-page list of exactly what to write. Get in touch and we will take a look at your site.