Image Alt Text: Complete SEO & Accessibility Guide

Quick Answer: Alt text describes images for screen readers and search engines. Keep it under 125 characters, be specific and descriptive, include keywords naturally, don't start with "image of," and use empty alt="" for decorative images only.

What is Alt Text?

Alt text (alternative text) is an HTML attribute that describes the content of an image. It serves two primary purposes:

1. Accessibility: Screen readers read alt text to visually impaired users
2. SEO: Search engines use alt text to understand image content

<img src="image.jpg" alt="Descriptive text about the image">

Why Alt Text Matters

For Accessibility

• Screen readers rely on alt text
• Helps visually impaired users understand content
• Required for WCAG compliance
• Improves user experience for all

For SEO

• Search engines can't "see" images
• Alt text provides context for image search
• Helps pages rank for image queries
• Contributes to overall page relevance

For User Experience

• Displays when images fail to load
• Provides context on slow connections
• Helps users on text-only browsers

How to Write Effective Alt Text

1. Be Descriptive and Specific

Bad: "Image" Good: "Golden retriever puppy playing with red ball in backyard"

2. Keep It Concise

• Aim for 125 characters or less
• Be descriptive but not verbose
• Include essential information only

3. Include Relevant Keywords

When natural, include target keywords:

Good: "Free SEO analysis tool showing website score" Bad: "SEO tool SEO analysis SEO checker free SEO" (keyword stuffing)

4. Describe the Image's Purpose

Consider why the image is there:

• Informational: Describe what it shows
• Functional: Describe what it does (buttons, icons)
• Decorative: Use empty alt="" for purely decorative images

5. Don't Start with "Image of" or "Picture of"

Screen readers already announce images:

Bad: "Image of a sunset over the ocean" Good: "Sunset casting orange light over Pacific Ocean waves"

Alt Text Examples by Image Type

Product Images

<img src="shoe.jpg" alt="Nike Air Max 270 running shoe in black and white, side view">

Infographics

<img src="stats.jpg" alt="Bar chart showing 60% of websites lack proper meta descriptions">

Screenshots

<img src="tool.jpg" alt="SEO analyzer dashboard showing meta tag analysis results">

Team Photos

<img src="team.jpg" alt="Marketing team of five people meeting in conference room">

Decorative Images

<img src="divider.jpg" alt="">

Common Alt Text Mistakes

1. Missing Alt Attributes

Always include alt, even if empty for decorative images:

<!-- Wrong - missing alt -->
<img src="image.jpg">

<!-- Correct - empty alt for decorative -->
<img src="decorative.jpg" alt="">

2. Keyword Stuffing

Avoid cramming keywords:

Bad: "SEO tools best SEO tools free SEO analysis SEO checker"

3. Too Long

Keep alt text concise:

Bad: A 200+ word description that reads like a paragraph

4. Using File Names

Don't rely on file names as alt text:

Bad: "IMG_12345.jpg"

5. Repeating Nearby Text

Don't duplicate caption or surrounding text.

Alt Text for Different Contexts

E-commerce Sites

Include:

• Product name
• Key features
• Color/size when relevant
• Brand name

Blog Posts

Include:

• What the image shows
• Relevance to article topic
• Any text within the image

Portfolio Sites

Include:

• Project name
• Type of work
• Key visual elements

Auditing Your Image Alt Text

Check your images for:

1. Missing alt attributes
2. Generic or unhelpful alt text
3. Keyword-stuffed descriptions
4. Overly long alt text
5. Decorative images with text alt

Quick Audit: Use our SEO analyzer to check all images on a page for missing or problematic alt text.

Conclusion

Well-crafted alt text improves both accessibility and SEO. Take time to write descriptive, concise alt text for every meaningful image on your site.

Check your image optimization with our free SEO analysis tool.

Pros and Cons of Image Alt Text

Pros

• Improves accessibility: Screen readers depend on alt text for visually impaired users
• SEO benefits: Helps pages rank in image search and improves overall relevance
• Fallback content: Displays when images fail to load or on slow connections
• Legal compliance: Required for WCAG accessibility standards

Cons

• Time investment: Writing unique, descriptive alt text for every image takes effort
• Character limitations: Screen readers may truncate text over 125 characters
• Keyword temptation: Easy to over-optimize and stuff keywords unnaturally
• Maintenance required: Alt text needs updating when images change

Frequently Asked Questions

How long should alt text be?

Keep alt text under 125 characters. Screen readers may cut off longer descriptions. If more detail is needed, use the image's surrounding content or a longdesc attribute for complex images.

Should I include keywords in alt text?

Yes, include keywords naturally when relevant, but don't force them. Alt text should accurately describe the image first. If your keyword fits naturally, include it; otherwise, prioritize accuracy.

What should I use for decorative images?

Use empty alt="" (not missing alt) for purely decorative images like borders, spacers, or background designs. This tells screen readers to skip the image entirely.

Do background images need alt text?

CSS background images can't have alt text. If a background image conveys important information, include that content in the HTML text or use an actual img tag instead.

Does every image need alt text?

Every img tag needs an alt attribute. Meaningful images need descriptive alt text. Decorative images need empty alt="". Never omit the alt attribute entirely.

Can alt text be too short?

Yes. Single words like "logo" or "photo" are usually insufficient. Be specific: "Company ABC logo" or "Marketing team meeting in conference room" provides much better context.