Alt Text Cheat Sheet

Your guide to writing accessible image descriptions

Quick Reference

✅ Do

  • • Be specific and descriptive
  • • Keep it under 125 characters
  • • Include important text in images
  • • Consider context and purpose

❌ Don't

  • • Start with "Image of" or "Picture of"
  • • Be vague or generic
  • • Include unnecessary details
  • • Forget decorative images (use alt="")

Examples by Category

📊 Informative Images

✅ Good Example

Alt text:

"Bar chart showing website traffic increased 40% from January to March"

❌ Bad Example

Alt text:

"Chart"

🔗 Functional Images

✅ Good Example

Alt text:

"Send email"

❌ Bad Example

Alt text:

"Envelope icon"

🎨 Decorative Images

✅ Correct Approach

Alt text:

alt="" (empty alt attribute)

Use empty alt text for purely decorative images that don't add information.

🎯 Interactive Practice

Practice Writing Alt Text

Scenario: A quote graphic with a minimalist design. It has a small red flag icon in the corner and text that reads: "Doing the quiet, unseen work that keeps everything functioning."

Think about: What's the purpose? What's the main content? Any important context?

🎯 Context Matters

The same image needs different alt text depending on its context:

In a news article:

🏢

"CEO Sarah Johnson announces quarterly results at company headquarters"

In a staff directory:

🏢

"Sarah Johnson, CEO"

⚡ Quick Formula for Writing Alt Text

Purpose + Main Content + Context (if needed)

Think: "If someone can't see this image, what would they need to know to get the same message?"

✅ Formula in Action

Example:

"Quote tile promoting equity in the workplace. Text reads: 'Silence isn't safety. It's protection for power.'"

Purpose: Quote tile promoting equity in the workplace

Main Content: Text reads: 'Silence isn't safety. It's protection for power.'

💬 Special Rules for Quote Graphics

Key Guidelines:

  • • Include the full quote text (it's essential content)
  • • Mention design cues only if they add meaning
  • • Focus on the message, not just the visual design

❌ Too Focused on Design

"Red square with black text"

✅ Content-Focused

"Quote graphic with red flag icon reading: 'Silence isn't safety. It's protection for power.'"

✍️ Style & Tone Guidelines

✅ Write Like This

  • •
    Neutral and descriptive

    Focus on facts, not opinions

  • •
    Like explaining over the phone

    Clear and conversational

  • •
    Simple punctuation

    Commas and periods help screen readers pause

❌ Avoid This

  • •
    Subjective language

    "Beautiful," "amazing," "striking" (unless relevant)

  • •
    Unnecessary details

    Focus on meaning, not minutiae

  • •
    Complex punctuation

    Keep it simple for screen readers

📱 Platform-Specific Instructions

💼

LinkedIn

Click "Edit alt text" after uploading image

📸

Instagram

Go to "Advanced settings" → "Write alt text"

🐦

X (Twitter)

Tap "+ALT" when posting your image

👥

Facebook

Use "Edit photo" → "Alternative text"

📊 Complex Images & Infographics

For charts, infographics, and multi-slide carousels:

  • • Summarize the main takeaway in alt text
  • • Include detailed data in your post caption
  • • Consider adding a text description as a separate post

✅ Complex Image Example

Alt text:

"Infographic showing 5 steps to inclusive hiring practices"

Then in caption:

Detailed breakdown of each step with statistics and examples...

🛠️ Tools & Resources

Testing Tools

  • • Screen reader testing (NVDA, JAWS, VoiceOver)
  • • Browser accessibility tools
  • • WAVE Web Accessibility Evaluator
  • • axe DevTools extension

Guidelines

  • • WCAG 2.1 Guidelines
  • • WebAIM Alt Text Guide
  • • W3C Images Tutorial
  • • Platform-specific guidelines

Making the web accessible for everyone