What is alt text and why is it important?

Alt text (alternative text) is a text description of an image that appears when images cannot be displayed or for users with screen readers. It is critical for email accessibility because: (1) Screen reader users rely on alt text to understand image content. (2) Many email clients block images by default for security. (3) Alt text displays while images load on slow connections. (4) WCAG 2.1 requires alt text for Level A compliance (criterion 1.1.1). Good alt text makes your emails accessible to everyone.

What is the ideal length for alt text?

The ideal alt text length is 20-125 characters. Alt text shorter than 20 characters may be too vague and not descriptive enough. Alt text longer than 125 characters risks being truncated by screen readers and may be too verbose. If you need more detail, provide a short alt text and include additional context in the surrounding email text. Empty alt text (alt="") is appropriate for purely decorative images that add no meaningful content.

Should I start alt text with "image of" or "picture of"?

No, do not start alt text with "image of" or "picture of". Screen readers already announce that the element is an image, so these phrases are redundant and waste character space. Instead, jump straight to the description. For example, use "Team brainstorming session with sticky notes" instead of "Image of a team brainstorming session with sticky notes".

How do I write alt text for logos?

For logos used as brand identifiers, use the company name as alt text (e.g., alt="ACME Corp"). If the logo appears near the company name in text, use empty alt text (alt="") to avoid redundancy. If the logo is a clickable link to the homepage, use alt text that describes the function (e.g., alt="ACME Corp - Go to homepage"). The key is to avoid repeating information that is already present in surrounding text.

What should I use for decorative images?

For purely decorative images that add no meaningful content (borders, dividers, design elements), use empty alt text: alt="". This tells screen readers to skip the image entirely, avoiding unnecessary verbosity. Never omit the alt attribute completely - always include alt="" for decorative images. Examples of decorative images include spacer GIFs, decorative borders, background patterns, and purely aesthetic graphics.

How do I write alt text for charts and graphs?

For charts and graphs, describe the key insight or conclusion, not just the type of chart. Bad example: "Bar chart". Good example: "Bar chart showing 45% increase in sales from Q1 to Q2". If the data is complex, provide a short alt text with the key takeaway and include a data table or detailed description in the surrounding email text. The alt text should convey the same information a sighted user would gain from viewing the chart.

What are common alt text mistakes to avoid?

Common alt text mistakes include: (1) Using filenames like "img_001.jpg" or "DSC_1234" - always write descriptive text. (2) Being too vague like "Logo" or "Image" - be specific about what the image shows. (3) Starting with redundant phrases like "image of" or "picture of" - screen readers already announce it is an image. (4) Writing overly long descriptions over 125 characters - keep it concise and move details to surrounding text. (5) Omitting alt attributes entirely - always include alt, even if empty for decorative images.

Alt Text Quality Analyzer

Evaluate the quality of your image alternative text. Get instant feedback on length, clarity, and accessibility best practices with our free WCAG-compliant alt text analyzer.

Alt Text Quality Analyzer

Evaluate the quality of your image alternative text. Get instant feedback on length, clarity, and accessibility best practices.

Enter Alt Text to Analyze

0 charactersThis is a decorative image

Try Examples:

Understanding Alt Text and Email Accessibility

Why Alt Text Quality Matters

Alternative text (alt text) is crucial for email accessibility. It provides text descriptions of images for:

Screen readers: Visually impaired users rely on alt text to understand image content
Images-disabled users: Many email clients block images by default for security
Slow connections: Alt text displays while images load
SEO: Search engines index alt text for better email archive discoverability
WCAG 2.1 compliance: Required for Level A accessibility (criterion 1.1.1)

Alt Text Best Practices

1. Be Descriptive and Specific

Describe what is important about the image in the context of your email. Include relevant details like colors, actions, or key features.

2. Keep It Concise

Aim for 20-125 characters. Screen readers may truncate very long descriptions. If more detail is needed, include it in surrounding text.

3. Avoid Redundant Phrases

Do not start with "image of" or "picture of" - screen readers already announce it is an image. Jump straight to the description.

4. Use Empty Alt for Decorative Images

If an image is purely decorative and adds no meaningful content, use alt="" (empty string). This tells screen readers to skip it.

Common Alt Text Mistakes

Using Filenames

❌ Bad: alt="img_001.jpg" or alt="DSC_1234"

✓ Good: alt="Team celebrating project launch with champagne"

Being Too Vague

❌ Bad: alt="Logo" or alt="Image"

✓ Good: alt="ACME Corp logo - red and blue geometric design"

Starting with Redundant Phrases

❌ Bad: alt="Image of a team meeting with people discussing"

✓ Good: alt="Team brainstorming session with sticky notes on whiteboard"

Writing Overly Long Descriptions

❌ Bad: alt="A photograph taken from a low angle showing a modern glass and steel office building with reflective windows on a partly cloudy day with blue sky in the background and some trees visible in the foreground with people walking by on the sidewalk" (197 characters)

✓ Good: alt="Modern glass office building with reflective windows" (59 characters)

Alt Text Examples by Context

Product Images

✓ alt="Wireless headphones in matte black with gold accents"

Describes key visual features that help identify the product

Charts and Graphs

✓ alt="Bar chart showing 45% increase in sales from Q1 to Q2"

Conveys the key insight, not just "bar chart"

Logos

✓ alt="Company Name" (if used as brand identifier)

✓ alt="" (if logo appears near company name text)

Avoid redundancy if the company name is already in text

Decorative Images

✓ alt=""

Empty alt text for borders, dividers, or purely decorative graphics

How to Test Your Alt Text

Read it aloud: Does it make sense without seeing the image?
The phone test: What would you say if describing this image to someone over the phone?
Context check: Does the alt text make sense in the context of the surrounding content?
Screen reader test: Use a screen reader (NVDA, JAWS, VoiceOver) to hear how it sounds
Length check: Aim for 20-125 characters for optimal accessibility

WCAG 2.1 Requirements

Success Criterion 1.1.1 Non-text Content (Level A): All non-text content must have a text alternative that serves the equivalent purpose.

Informative images: Alt text must convey the same information as the image
Functional images: Alt text must describe the function, not just appearance
Decorative images: Use empty alt text (alt="") to avoid unnecessary verbosity
Complex images: Provide a short alt text and long description in surrounding text

Learn more: WCAG 2.1 Understanding Non-text Content

Related Tools

Use these complementary tools to further improve your email accessibility and deliverability:

WCAG 2.1 Compliance Checker - Comprehensive accessibility validation for email HTML
Color Contrast Checker - Ensure text meets WCAG contrast ratio requirements
Email Header Validator - Check email headers for proper structure and authentication