Alt Text Examples
Alt text is the short HTML text used to describe an image’s content or function for screen readers and other assistive technologies.
Key takeaways
- Alt text is required for accessibility and helps search engines understand images.
- Keep it short (under 150 characters) and focused on the image’s purpose.
- Use empty alt text for decorative images.
- For linked images, describe the link destination.
- Avoid keyword stuffing and generic phrases like “image of.”
Alt text is a small HTML attribute that makes a big difference for both users and search engines.
Alt Text Example: Product Photo
- Image: A red ceramic coffee mug with a white interior, photographed on a wooden table.
- Good alt text: `Red ceramic coffee mug on a wooden table`
- Bad alt text: `mug` (too generic) or `red ceramic coffee mug on a wooden table with a white interior and a handle` (too detailed)
- Why it works: It describes the key visual elements (color, material, object) without extra fluff.
When Should You Use Alt Text?
- Every meaningful image — photos, illustrations, charts, icons that convey information.
- Linked images — describe the destination, not the visual (e.g., `alt="Visit our pricing page"`).
- Image buttons — describe the action (e.g., `alt="Search"`).
- Complex images — charts, graphs, screenshots: summarize the key takeaway in alt text, and provide full details in nearby text or a long description.
What Alt Text Is Not
- Not a caption — captions are visible text; alt text is hidden from sighted users.
- Not a keyword dump — stuffing keywords hurts accessibility and SEO.
- Not a title attribute — the `title` attribute is a tooltip, not a replacement for alt text.
- Not optional for meaningful images — missing alt text breaks accessibility.
- Not a description of every pixel — focus on the image’s purpose in context.
Quick Start: How to Write Alt Text
- Identify the image’s purpose — is it informative, decorative, or functional?
- Write a concise description — 1–2 sentences, under 150 characters.
- Avoid starting with “image of” or “picture of” — screen readers already announce it’s an image.
- Use empty alt text (`alt=""`) for decorative images — so screen readers skip them.
- For linked images, describe the link destination — not the visual appearance.
- Test with a screen reader — ensure the description makes sense out of context.
Common Alt Text Mistakes to Avoid
- Generic text like `photo` or `image` — adds no value.
- Keyword stuffing — e.g., `buy cheap red coffee mug online` — unnatural and penalized.
- Repeating nearby text — if the caption already says “Red ceramic mug,” don’t repeat it.
- Missing alt text on meaningful images — leaves users and search engines blind.
- Using alt text on decorative images — clutters screen reader output; use `alt=""` instead.
Next step
FAQ
What is alt text?
Alt text is an HTML attribute added to an image tag that provides a text description of the image for screen readers and search engines.
How long should alt text be?
Keep alt text under 125–150 characters, usually one or two short sentences.
Should I use keywords in alt text?
Only use keywords naturally if they describe the image. Do not keyword stuff.
What is empty alt text?
Empty alt text (alt="") tells screen readers to skip the image. Use it for decorative images that add no information.
Related topics
Sources
- Google Search Central — Google’s guidance on image SEO and helping search systems understand image content.
- Google Technical Writing: Write helpful alt text — Clear, practical guidance on concise, contextual alt text.
- WebAIM: Alternative Text — Widely cited accessibility guidance on accurate, succinct alt text.
- W3C WCAG Technique H37 — Standards-based examples for meaningful alternative text.
- Section 508: Authoring Meaningful Alternative Text — Government accessibility guidance on concise, context-aware alt text.
Reviewed by Lucía Marín, Founding editor.