Image Alt

Why It Matters

• Screen readers either skip images without alt or announce the filename, which is usually meaningless ("IMG_20240315_142537.jpg").
• WCAG 1.1.1 (Non-text Content) requires all non-decorative images to have a text alternative.
• Google Image Search uses alt text as a primary signal for indexing and ranking images.
• When images fail to load (slow connection, broken URL), the alt text is displayed in place, preserving context for sighted users too.

How to Fix It

1. Write alt text that describes the image's purpose, not just its appearance. "Chart showing 40% revenue growth in Q3" is better than "bar chart."
2. For decorative images (visual flourishes, spacers, backgrounds), use an empty alt: alt="". This tells screen readers to skip the image entirely.
3. Keep alt text concise — typically under 125 characters. For complex images (graphs, diagrams), provide a longer description nearby or via aria-describedby.
4. Do not start alt text with "Image of" or "Picture of" — the screen reader already announces it as an image.
5. For linked images with no other text, the alt must describe the link's destination, not the image itself.

Common Mistakes

• Leaving the alt attribute off entirely — this causes screen readers to read the filename or URL.
• Using the same generic alt text on every image ("image," "photo," "banner").
• Stuffing keywords into alt text for SEO — this is considered spam by search engines and degrades accessibility.
• Making decorative images informative — adding alt text to visual separators or background flourishes clutters the screen reader experience.