🖼️ Alt Text Complete Guide
Master the art of writing descriptive, accessible, and SEO-friendly alt text for all images on your website.
Why Alt Text Matters
Accessibility
Screen readers use alt text to describe images to visually impaired users, making your content inclusive.
SEO Value
Search engines read alt text to understand image content, helping you rank in image search results.
Image Fallback
Alt text displays when images fail to load, ensuring users still understand the content.
Legal Compliance
Many accessibility laws require alt text on images, including WCAG 2.1 and ADA requirements.
Best Practices
Do: Write Descriptive Alt Text
<img src="lion-mane.jpg" alt="Fresh lion's mane mushroom growing on oak log, showing white cascading spines">
<img src="chart.jpg" alt="Bar chart showing psilocybin research funding increased 300% from 2018 to 2023">
Don't: Use Poor Alt Text
<img src="mushroom.jpg" alt="mushroom">
<img src="recipe.jpg" alt="mushroom recipe best mushroom recipe easy mushroom cooking">
<img src="forest.jpg" alt="Image of forest">
Alt Text by Image Type
Informative Images
Photos and graphics that convey information or concepts to the reader.
Decorative Images
Images used purely for visual appeal with no informational value.
Functional Images
Images used as links or buttons that trigger an action.
Complex Images
Charts, graphs, diagrams, and infographics with detailed data.
Images of Text
Images that contain readable text as their primary content.
Group Images
Multiple images forming a single piece of information (e.g., star ratings).
How to Write Great Alt Text
Follow these guidelines to create alt text that serves both accessibility and SEO purposes effectively.
Real-World Examples
Alt Text Length Guidelines
💡 Pro Tip: Aim for 50-125 characters. If you need more, consider adding a caption or linking to a detailed description.
Accessibility Considerations
Screen Readers
JAWS, NVDA, and VoiceOver read alt text aloud. Write as if you're describing the image to someone over the phone.
Keyboard Navigation
Users navigating with keyboards rely on alt text for image links. Always describe the destination or action.
WCAG Compliance
WCAG 2.1 Level A requires text alternatives for non-text content. Alt text is the primary method for images.
SEO Impact of Alt Text
Image Search
Alt text helps images rank in Google Images, driving additional traffic.
Anchor Text
When images are links, alt text serves as anchor text for SEO value.
Page Context
Alt text adds keyword-rich content that helps search engines understand page topics.
Relevance Signals
Properly optimized alt text reinforces topical relevance for target keywords.