Accessible Images and Alt Text: Complete Guide for Web Developers

Why Image Accessibility Matters

Images are everywhere on the web, but they can create significant barriers for users who are blind, have low vision, or use screen readers. Proper image accessibility ensures that visual content is available to everyone through alternative text descriptions.

According to WebAIM's screen reader survey, images without proper alt text are one of the most frustrating accessibility barriers for blind users. With over 1 billion images uploaded to the web daily, getting image accessibility right is crucial for an inclusive web.

Understanding Different Types of Images

Not all images require the same accessibility treatment. Understanding the different types helps you choose the right approach:

1. Informative Images

Images that convey important information need descriptive alt text that captures the essential meaning.

<!-- Good: Descriptive alt text -->
<img src="sales-chart.png" 
     alt="Sales increased 25% from Q1 to Q2, reaching $50,000 in June">

<!-- Bad: Generic alt text -->
<img src="sales-chart.png" alt="Chart">

2. Decorative Images

Purely decorative images should have empty alt attributes to hide them from screen readers.

<!-- Decorative image -->
<img src="decorative-border.png" alt="" role="presentation">

<!-- Using CSS for decorative images is even better -->
<div class="decorative-border"></div>

3. Functional Images

Images that serve as links or buttons should describe their function, not their appearance.

<!-- Image button -->
<button>
  <img src="search-icon.svg" alt="Search">
</button>

<!-- Image link -->
<a href="/contact">
  <img src="phone-icon.svg" alt="Contact us">
</a>

4. Complex Images

Charts, graphs, and diagrams need both concise alt text and detailed descriptions.

<!-- Complex image with description -->
<img src="quarterly-sales.png" 
     alt="Quarterly sales data showing steady growth"
     aria-describedby="chart-description">

<div id="chart-description">
  <h3>Quarterly Sales Data</h3>
  <p>Sales performance over four quarters:</p>
  <ul>
    <li>Q1 2023: $30,000 (20% increase from previous year)</li>
    <li>Q2 2023: $45,000 (50% increase from Q1)</li>
    <li>Q3 2023: $52,000 (15% increase from Q2)</li>
    <li>Q4 2023: $58,000 (12% increase from Q3)</li>
  </ul>
</div>

Writing Effective Alt Text

Good alt text is an art that balances brevity with descriptiveness. Here's how to master it:

Alt Text Best Practices

• Be concise: Aim for 125 characters or less when possible
• Be specific: Describe what's actually in the image, not what you think it represents
• Consider context: Alt text should complement surrounding content, not repeat it
• Don't say "image of": Screen readers already announce it's an image
• Include text in images: If the image contains important text, include it in alt text
• Describe the mood when relevant: For artistic images, mood and style can be important

Alt Text Examples: Good vs Bad

Technical Implementation

Basic HTML Implementation

<!-- Standard image with alt text -->
<img src="product.jpg" 
     alt="Blue wireless headphones with adjustable headband and noise cancellation"
     width="300" 
     height="200">

<!-- Image with caption -->
<figure>
  <img src="team-retreat.jpg" 
       alt="Five team members hiking together on mountain trail">
  <figcaption>Our development team at the 2023 annual retreat</figcaption>
</figure>

Responsive Images

<!-- Responsive image with alt text -->
<picture>
  <source media="(min-width: 800px)" srcset="large-hero.jpg">
  <source media="(min-width: 400px)" srcset="medium-hero.jpg">
  <img src="small-hero.jpg" 
       alt="Mountain landscape at sunrise with orange and purple sky reflecting in calm lake">
</picture>

CSS Background Images

CSS background images are invisible to screen readers. If the image conveys important information, use HTML images instead or provide alternative content.

<!-- CSS background image with accessible alternative -->
<div class="hero-banner" 
     role="img" 
     aria-label="Snow-capped mountain peaks at sunset with village lights below">
  <h1>Welcome to Alpine Adventures</h1>
  <p>Discover breathtaking mountain experiences</p>
</div>

<style>
.hero-banner {
  background-image: url('mountain-sunset.jpg');
  background-size: cover;
  background-position: center;
}
</style>

Handling Special Cases

Images with Text Overlays

When images contain text, include that text in the alt attribute along with relevant visual context.

<!-- Image with text overlay -->
<img src="sale-banner.jpg" 
     alt="50% OFF SALE - Limited Time Offer - Shop Now - Bright red background with white text">

Image Galleries

For image galleries, provide meaningful alt text for each image while avoiding repetition.

<!-- Image gallery with descriptive alt text -->
<div class="gallery" aria-label="Nature photography collection">
  <img src="sunset-lake.jpg" 
       alt="Golden sunset reflecting on calm lake with silhouetted pine trees">
  <img src="morning-dew.jpg" 
       alt="Close-up of water droplets on red tulip petals in morning light">
  <img src="mountain-peak.jpg" 
       alt="Snow-covered mountain peak against deep blue sky with wispy clouds">
</div>

Loading States and Error Handling

<!-- Image with loading state and error handling -->
<img src="large-infographic.jpg" 
     alt="Complete guide to web accessibility - infographic showing 10 key principles"
     loading="lazy"
     onerror="this.alt='Image unavailable: Accessibility guide infographic'">

Testing Image Accessibility

Automated Testing Tools

• axe DevTools: Identifies missing alt text and empty images
• WAVE: Shows alt text content and identifies accessibility issues
• Lighthouse: Audits image accessibility as part of overall accessibility score
• Alt Text Tester: Browser bookmarklet to display all alt text

Manual Testing Methods

• Turn off images: Disable images in your browser to see if content still makes sense
• Use a screen reader: Navigate with NVDA or VoiceOver to hear how images are announced
• Review in context: Check that alt text provides equivalent information to the visual
• Test with users: Get feedback from actual screen reader users when possible

Common Alt Text Mistakes

• Redundant descriptions: Don't repeat information already in surrounding text
• Keyword stuffing: Don't stuff keywords into alt text for SEO purposes
• Overly long descriptions: Keep alt text focused on essential information
• Missing alt attributes: Every img tag should have an alt attribute (empty if decorative)
• Filename as alt text: "IMG_1234.jpg" or "screenshot.png" are not helpful
• Generic descriptions: "Photo" or "Image" don't provide useful information

Advanced Techniques

Using ARIA for Complex Images

<!-- Complex infographic with detailed description -->
<img src="carbon-footprint-infographic.png" 
     alt="5 steps to reduce carbon footprint infographic"
     aria-describedby="infographic-details"
     role="img">

<div id="infographic-details">
  <h3>5 Steps to Reduce Your Carbon Footprint</h3>
  <ol>
    <li><strong>Transportation (45% reduction):</strong> Use public transit, bike, or walk instead of driving</li>
    <li><strong>Energy (30% reduction):</strong> Switch to renewable energy sources</li>
    <li><strong>Diet (15% reduction):</strong> Reduce meat consumption, especially beef</li>
    <li><strong>Shopping (8% reduction):</strong> Buy local, seasonal products</li>
    <li><strong>Waste (5% reduction):</strong> Recycle properly and reduce single-use items</li>
  </ol>
</div>

SVG Accessibility

<!-- Accessible SVG with title and description -->
<svg role="img" aria-labelledby="chart-title" aria-describedby="chart-desc" width="400" height="300">
  <title id="chart-title">Monthly Website Traffic Trends</title>
  <desc id="chart-desc">
    Bar chart showing website traffic growth from 1,000 visitors in January 
    to 5,000 visitors in June, with steady monthly increases
  </desc>
  <!-- SVG chart content -->
  <rect x="0" y="250" width="50" height="50" fill="#3b82f6"/>
  <rect x="60" y="200" width="50" height="100" fill="#3b82f6"/>
  <!-- More chart elements -->
</svg>

Interactive Images

<!-- Image map with accessible alternatives -->
<img src="office-floor-plan.jpg" 
     alt="Office floor plan with clickable room areas"
     usemap="#floor-plan">

<map name="floor-plan">
  <area shape="rect" coords="10,10,100,50" 
        href="/rooms/conference" 
        alt="Conference Room A - Seats 12 people">
  <area shape="rect" coords="10,60,100,100" 
        href="/rooms/kitchen" 
        alt="Kitchen and break area">
  <area shape="rect" coords="110,10,200,100" 
        href="/rooms/open-office" 
        alt="Open office workspace - 20 desks">
</map>

Image Accessibility in Different Contexts

E-commerce Product Images

• Describe the product, color, style, and key features
• Include size, material, or other relevant attributes
• For multiple views, specify the angle or perspective
• Example: "Black leather messenger bag with silver buckles and adjustable shoulder strap, front view"

Social Media and Marketing

• Focus on the message or call-to-action
• Include important text from the image
• Describe the emotional tone when relevant
• Keep brand voice in mind while maintaining accessibility

Educational Content

• Focus on the learning objective
• Describe relationships and processes shown
• Include all text and labels
• Consider providing detailed descriptions for complex diagrams

Alt Text and SEO

While alt text is primarily for accessibility, it also benefits SEO:

• Image search: Alt text helps images appear in relevant searches
• Context for crawlers: Search engines use alt text to understand image content
• User experience: Better accessibility leads to better user engagement
• Best practice: Write alt text for users first, SEO benefits will follow naturally

Conclusion

Image accessibility is fundamental to creating an inclusive web. By understanding different types of images, writing effective alt text, and implementing proper HTML techniques, you ensure that visual content is available to all users.

Remember these key principles:

• Every image needs an alt attribute (even if empty)
• Alt text should convey the same information as the image
• Context matters - consider the surrounding content
• Test with real users and assistive technologies
• Accessibility and good SEO go hand in hand

Good image accessibility isn't just about compliance—it's about creating equivalent experiences for all users and making the web more inclusive for everyone.