How to Write Alt Text: The Complete Guide to SEO and Accessibility

Alt text is an HTML attribute on image tags, and it’s one of the most commonly misused elements on the web — either left blank, filled with meaningless filenames, or stuffed with keywords. Done correctly, alt text improves both search engine rankings and accessibility for visually impaired users. This guide explains what alt text is, why it matters, how to write it well, and provides extensive before-and-after examples for every major image type.

What Is Alt Text?

Alt text is the alt attribute of the HTML <img> tag:

<img src="running-shoes.jpg" alt="Red Nike Air Max 90 running shoes, side view, white sole">

When an image fails to load — due to a broken link, network error, or a user setting that blocks images — alt text displays in the image’s place, informing the user what was there. For visually impaired users relying on screen readers (NVDA, JAWS, Apple VoiceOver), the screen reader reads the alt text aloud, conveying the image’s information in words.

The Dual Function of Alt Text

Function 1: Search Engine Optimization

Google’s crawlers can read alt text directly and use it to understand what an image depicts. While Google Vision AI can analyze image content visually, alt text remains the clearest, most reliable signal:

• Helps images appear in Google Image Search results for relevant keywords
• Provides additional keyword context to the page (naturally incorporated, not stuffed)
• Helps Google understand the relationship between an image and the surrounding content
• Contributes to the page’s overall topical relevance signals

Function 2: Web Accessibility

According to the World Health Organization, approximately 285 million people worldwide have visual impairments, many of whom browse the web using screen readers. Images without alt text are information voids — the screen reader announces “image.jpg” or skips the element entirely, conveying nothing.

In many countries (including the US ADA, EU EN 301 549 standard), web accessibility is a legal requirement. Proper alt text is a core component of compliance.

Alt Text Writing Principles

1. Describe what’s actually in the image: Write what you see — not what you wish would rank in search
2. Incorporate keywords naturally: If a keyword genuinely describes the image content, include it — it should emerge naturally from the description
3. Be specific but concise: 5–15 words covers most situations; avoid essays
4. Don’t begin with “Image of…” or “Picture of…”: Search engines and screen readers already know it’s an image
5. Don’t keyword-stuff: alt="running shoes athletic shoes jogging shoes sneakers trainers" is spam; Google may treat it as such and penalize the page
6. Don’t duplicate surrounding text: If text next to an image already describes it fully, keep the alt text shorter to avoid redundancy for screen reader users

Good vs. Bad Alt Text: Side-by-Side Examples

Scenario 1: Product Image (Running Shoes)

• Bad: alt="" (blank)
• Bad: alt="img0023" (meaningless filename)
• Bad: alt="running shoes athletic shoes training shoes sneakers" (keyword stuffing)
• Good: alt="Nike Air Max 90 running shoes in crimson red, men's version, side view"
• Good: alt="Red Nike Air Max 90 with white midsole and mesh upper, side profile"

Scenario 2: Recipe Image (Chocolate Lava Cake)

• Bad: alt="dessert" (too vague)
• Bad: alt="cake photo" (uninformative)
• Good: alt="Chocolate lava cake cut open revealing flowing liquid chocolate center, served with a scoop of vanilla ice cream"

Scenario 3: Person / Portrait

• Bad: alt="image"
• Bad: alt="CEO photo" (too vague)
• Good: alt="Company founder Maria Chen, smiling headshot in office setting"
• Note: If the person’s name and title appear in adjacent text, a shorter alt text avoids redundancy: alt="Portrait of Maria Chen"

Scenario 4: Infographic

• Bad: alt="infographic"
• Good: alt="2024 global smartphone market share chart: Samsung 22%, Apple 18%, Xiaomi 12%, others 48%" (include the key data from the chart)
• Better approach: Present the full data in body text as well; use alt text to summarize the chart’s topic. Screen readers can then provide full access to the information.

Scenario 5: Purely Decorative Images

• Decorative elements — dividers, background patterns, abstract shapes with no informational content — should use an empty alt attribute: alt=""
• Note: This is different from omitting the alt attribute entirely. An empty alt tells screen readers to skip the image; a missing alt causes screen readers to announce the filename instead.

Scenario 6: Linked Images (Clickable Images)

• When an image functions as a link, the alt text should describe the link’s destination — not the image itself
• Bad: alt="logo" (when a logo links to the homepage)
• Good: alt="Return to homepage" or alt="[Brand Name] homepage"

Alt Text Examples by Context

E-commerce:

• alt="Blue 30L hiking backpack with side water bottle pocket, front view"
• alt="Matte black 500ml stainless steel insulated water bottle with straw lid"

Blog and News:

• alt="Taipei 101 night skyline with city lights reflecting on the river"
• alt="Scientist operating a microscope in a laboratory"

Company Website:

• alt="Company headquarters lobby in Taipei's Xinyi District, featuring high ceilings and natural lighting"
• alt="Team photo from 2024 annual company retreat, approximately 50 employees at an outdoor venue"

Service Page Icons:

• alt="Cloud storage service icon"
• alt="24/7 customer support icon"
• (Purely decorative icons can use alt="")

Recommended Alt Text Length

• Simple images: 5–10 words, covering the main subject
• Complex photographs: 10–20 words, describing subject, context, and important details
• Infographics: Can be longer to include key data, but content over 150 characters is better placed in body text — alt text should only summarize
• Screen readers typically truncate alt text around 150 characters; design with this limit in mind

Frequently Asked Questions

Q: Does every image need alt text?
A: Every image with meaningful informational content needs descriptive alt text. Purely decorative images should use an empty alt="" to signal screen readers to skip them.

Q: If the same image is used on multiple pages, should the alt text be identical?
A: Not necessarily. Alt text should be written in context for the specific page. The same image might play different roles on different pages, and the alt text can reflect that.

Q: My CMS (like WordPress) has both “Alt Text” and “Caption” fields — what’s the difference?
A: Alt text is an HTML attribute visible to screen readers and search engines but not displayed to regular users. The caption appears visibly below the image for all users. Both serve different purposes and both should be filled in thoughtfully.

Conclusion

Alt text is a small HTML attribute with significant responsibilities: it helps search engines understand images, enables visually impaired users to access your content, and provides fallback information when images fail to load. Effective alt text is honest and concise — a faithful description of what’s in the image, with keywords incorporated only when they naturally belong. Building a habit of writing thoughtful alt text for every meaningful image is among the highest-value-per-effort improvements in SEO and accessibility work.

Do it in your browser — the file never leaves your device: Image Tools