How-to
How to Write Alt Text (With Examples)
The most common accessibility issue on the web is also one of the easiest to fix. Here are the rules, the examples, and the edge cases.
Alt text (alternative text) is the short written description of an image that screen readers announce, that shows when an image fails to load, and that search engines read to understand your visuals. It’s the single most common accessibility issue on the web — and one of the easiest to get right once you know the rules. This guide covers how to write alt text that genuinely helps, with side-by-side examples.
What alt text is (and who reads it)
Alt text lives in the HTML alt attribute: <img src="..." alt="A barista pouring latte art into a white cup">. It serves:
- Screen-reader users, who hear the description in place of the image.
- Anyone on a slow or broken connection, where the image doesn’t load.
- Search engines, which use it to index and rank images.
It maps directly to WCAG success criterion 1.1.1 (Non-text Content, Level A) — the most-cited failure in automated scans and lawsuits alike.
The core rules
- Describe the purpose, not just the pixels. Ask: why is this image here? Convey the information it communicates in context.
- Be concise. Aim for roughly a sentence (under ~125 characters). Screen-reader users don’t want a paragraph.
- Don’t start with “image of” or “picture of.” Assistive tech already announces it’s an image.
- Match the context. The same photo needs different alt text on a product page vs. a blog post.
- Include text that appears in the image if it carries meaning (e.g. a sign, a button).
- Don’t keyword-stuff. It hurts users and doesn’t help SEO.
Good vs. bad examples
| Image context | ❌ Poor alt | ✅ Better alt |
|---|---|---|
| Product photo of red running shoe | "shoe" | "Nike Pegasus running shoe in crimson red, side view" |
| Hero photo on an about page | "image1234.jpg" | "Our team of six gathered around a workshop table" |
| “Add to cart” button image | "button" | "Add to cart" |
| Chart showing sales doubling | "chart" | "Bar chart: monthly sales doubled from $20k in Jan to $40k in June" |
The “read it aloud” test
Read the sentence around the image with your alt text substituted for the image. If it flows and nothing meaningful is lost, your alt text is doing its job.
Decorative images & the empty alt
Not every image needs a description. Purely decorative images — background flourishes, dividers, a stock photo that adds no information — should have an empty alt attribute so screen readers skip them: alt="". Critically, this is not the same as omitting alt entirely — a missing attribute makes some screen readers read the file name aloud. Always include the attribute; leave it empty when the image is decorative.
Logos, icons, charts & complex images
- Logos: use the company name, e.g.
alt="avp.io". If it links home,alt="avp.io home". - Functional icons: describe the action, not the icon. A magnifying glass that submits search is
alt="Search", not "magnifying glass". - Icon next to a text label: if the visible text already says it, mark the icon decorative (
alt="") to avoid double announcements. - Charts/infographics: give a short alt summarizing the takeaway, and provide the full data in nearby text or a table.
Common mistakes
- Leaving the file name as alt text (
DSC_0042.jpg). - Writing "image of…" or "graphic of…".
- Describing a decorative image instead of using
alt="". - Stuffing keywords for SEO — search engines and users both penalize it.
- Omitting the
altattribute entirely (always include it, even if empty). - Putting essential information only in an image with no text alternative.