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
Click "Edit alt text" after uploading image
Go to "Advanced settings" → "Write alt text"
X (Twitter)
Tap "+ALT" when posting your image
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