Alt Text

What is Alt Text?

Alt text (alternative text) provides a text description for images on web pages. Technically, it is an attribute of the HTML <img> tag, though it is commonly referred to as "alt tags."

When you add an image to a webpage, the alt attribute describes what the image shows:

<img src="product.jpg" alt="Blue running shoes with white soles" />

This text serves multiple critical purposes: accessibility for visually impaired users, SEO for image search visibility, and fallback content when images fail to load.

Why Alt Text Matters

1. Accessibility

Alt text is essential for users who rely on screen readers. When a screen reader encounters an image, it reads the alt text aloud. Without alt text, the user hears "image" with no context, making the content incomprehensible.

Web accessibility guidelines (WCAG) require meaningful alt text for all informational images. Beyond legal compliance, accessible websites serve more users and demonstrate inclusive design practices.

2. Image Search SEO

Search engines cannot "see" images the way humans do. Google Image Search relies heavily on alt text to understand image content and context. Well-written alt text helps your images rank in image search results, driving additional traffic.

For e-commerce sites, image search can be a significant traffic source. Users searching for visual products often start with image search before clicking through to product pages.

3. Context When Images Fail

When images fail to load (slow connections, broken links, email clients blocking images), the alt text displays in place of the image. This ensures the content remains understandable even without visual elements.

4. Image Link Context

When an image is used as a link, the alt text serves as the anchor text for that link. This provides important context signals to search engines about the linked page.

How to Write Effective Alt Text

Be Descriptive and Specific

Describe what the image actually shows, not what you wish it showed or what keywords you want to rank for:

Vague: "Shoes"

Better: "Red Nike Air Max running shoes on white background"

Best for context: "Customer wearing red Nike Air Max running shoes on a forest trail"

Describe Function, Not Just Appearance

For functional images (buttons, icons, infographics), describe what the image does or communicates:

• Shopping cart icon: "Shopping cart - 3 items"
• Download button: "Download PDF report"
• Chart: "Bar chart showing 50% increase in organic traffic after SEO audit"

Avoid Redundant Phrases

Screen readers already announce "image" before reading alt text. Starting with "Image of..." or "Picture of..." creates redundancy:

Bad: "Image of a cat sleeping on a couch"

Good: "Orange tabby cat sleeping on a gray couch"

Keep It Concise

Alt text should be descriptive but not excessively long. Aim for 125 characters or fewer when possible. Screen readers may cut off very long alt text, and overly detailed descriptions can overwhelm users.

Include Keywords Naturally

If your target keyword relates to the image, include it naturally. But never force keywords into alt text where they do not fit:

Keyword stuffing: "SEO tools SEO software SEO audit tool best SEO"

Natural inclusion: "Dashboard showing SEO audit results with site health score"

Alt Text Code Examples

Bad — Empty or meaningless:

<img src="chart.png" alt="" />
<img src="chart.png" alt="chart" />
<img src="chart.png" alt="image" />

Good — Descriptive and contextual:

<img src="chart.png" alt="Bar chart showing 50% increase in organic traffic after SEO audit" />

Image as link:

<a href="/running-shoes">
  <img src="shoes.jpg" alt="Shop Nike running shoes" />
</a>

When to Use Empty Alt Text

Some images are purely decorative and add no informational value. For these, use empty alt text:

<img src="decorative-border.png" alt="" />

Empty alt text (alt="") tells screen readers to skip the image entirely. This is appropriate for:

• Decorative borders and dividers
• Background images that are presentational
• Icons that duplicate adjacent text
• Spacer images (though these should be replaced with CSS)

Using empty alt text is different from omitting the alt attribute entirely. Missing alt attributes fail accessibility standards, while empty alt attributes indicate intentional exclusion.

Alt Text for Different Image Types

Product Images

Include product name, key features, color, and brand:

"Men's Levi's 501 Original Fit Jeans in dark blue wash, front view"

Infographics and Charts

Summarize the key takeaway or data point:

"Pie chart showing market share: Company A 45%, Company B 30%, Others 25%"

For complex infographics, consider providing a longer description in the surrounding text or a linked detailed description.

Screenshots

Describe what the screenshot demonstrates:

"Google Search Console dashboard showing indexing status with 500 pages indexed"

Team Photos and Headshots

Include the person's name and role:

"Sarah Johnson, CEO of Acme Corporation"

Alt Text and SEO Best Practices

Image Filename Coordination

Alt text works best when coordinated with descriptive filenames:

• Filename: red-nike-running-shoes.jpg
• Alt text: "Red Nike Air Max running shoes with white soles"

Surrounding Content Context

The text surrounding an image provides additional context. Place relevant keywords in nearby headings and paragraphs rather than forcing them into alt text.

Unique Alt Text Per Image

Avoid using identical alt text for multiple images. Each image should have unique, specific alt text that describes that particular image.

Avoid Keyword Stuffing

Google explicitly warns against keyword stuffing in alt text. This practice can result in your site being perceived as spam. Write for users first, optimization second.

Testing Alt Text

Screen Reader Testing

Test your pages with a screen reader (VoiceOver on Mac, NVDA on Windows) to experience how alt text sounds to users.

Browser Image Disabling

Disable images in your browser to see how alt text displays as fallback content.

SEO Audit Tools

Use tools like Screaming Frog, Sitebulb, or Lighthouse to identify missing or duplicate alt text across your site.

Common Alt Text Mistakes

Missing Alt Attributes

Every informational image needs an alt attribute. Missing alt attributes fail accessibility audits and miss SEO opportunities.

Generic Placeholder Text

"Image" or "Photo" provides no value. If you cannot describe an image, reconsider whether it should be on the page.

Alt Text on Decorative Images

Describing decorative images clutters the experience for screen reader users. Use empty alt text for purely visual elements.

Overly Long Descriptions

While being descriptive is important, excessively long alt text becomes burdensome. Be concise while remaining informative.