Back to Knowledge Base
Common Issues

Fixing Missing Alt Text

12 min read

Complete Guide to Image Alternative Text

Missing or inadequate alternative text (alt text) is consistently the most common accessibility issue on the web. This guide covers everything you need to know about writing effective alt text for different image types.

Why Alt Text Matters

Alt text serves multiple purposes:

  • Screen Reader Users: Hear a description of the image
  • Low Bandwidth: See alt text when images don't load
  • Search Engines: Better understand your content
  • Content Indexing: Images become searchable

WCAG Requirements

1.1.1 Non-text Content (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Types of Images and How to Handle Them

1. Informative Images

Images that convey important information or concepts.

How to Write Alt Text:

  • Describe the content and function
  • Be concise but complete
  • Don't start with "Image of" or "Picture of"
  • Include relevant details
html
<!-- Photo of a person -->
<img src="ceo.jpg" 
     alt="Sarah Chen, CEO, speaking at the 2024 Tech Summit">

<!-- Product image -->
<img src="laptop.jpg" 
     alt="MacBook Pro 14-inch, Space Gray, open at 45-degree angle">

<!-- Chart or graph -->
<img src="sales-chart.png" 
     alt="Bar chart showing monthly sales: Jan $50k, Feb $62k, Mar $78k, Apr $85k">

2. Decorative Images

Images that add visual interest but don't convey information.

How to Handle:

  • Use empty alt attribute: alt=""
  • Consider using CSS background images instead
  • Add role="presentation" for extra clarity
html
<!-- Decorative divider -->
<img src="decorative-line.png" alt="" role="presentation">

<!-- Background pattern -->
<div style="background-image: url('pattern.png')">
  <!-- Content here -->
</div>

3. Functional Images

Images used as links or buttons.

How to Write Alt Text:

  • Describe the action, not the image
  • Think about what happens when clicked
html
<!-- Logo as home link -->
<a href="/">
  <img src="logo.png" alt="AccessibilityMonitor - Home">
</a>

<!-- Social media icon -->
<a href="https://twitter.com/example">
  <img src="twitter.png" alt="Follow us on Twitter">
</a>

<!-- Search button with icon -->
<button type="submit">
  <img src="search-icon.png" alt="Search">
</button>

4. Images of Text

Images containing text should be avoided, but when necessary:

html
<!-- Logo with company name -->
<img src="company-logo.png" alt="Acme Corporation">

<!-- Stylized quote -->
<img src="quote-image.png" 
     alt="Innovation distinguishes between a leader and a follower. - Steve Jobs">

5. Complex Images

Charts, diagrams, infographics, and other complex visuals.

Strategy: Provide both brief alt text and extended description.

html
<!-- Using figure and figcaption -->
<figure>
  <img src="org-chart.png" 
       alt="Company organization chart, full description below">
  <figcaption>
    <details>
      <summary>Organization Chart Description</summary>
      <p>The CEO reports to the Board of Directors. 
         Reporting to the CEO are three VPs: VP of Engineering, 
         VP of Sales, and VP of Marketing...</p>
    </details>
  </figcaption>
</figure>

<!-- Using aria-describedby -->
<img src="process-diagram.png" 
     alt="Customer onboarding process" 
     aria-describedby="process-description">
<div id="process-description" class="sr-only">
  Step 1: Customer signs up...
</div>

Common Alt Text Mistakes

Mistake 1: Redundant Phrases

html
<!-- Bad -->
<img alt="Image of a sunset">
<img alt="Photo of our team">
<img alt="Graphic showing sales data">

<!-- Good -->
<img alt="Sunset over the Pacific Ocean">
<img alt="Our team at the 2024 company retreat">
<img alt="Sales increased 40% from Q1 to Q2">

Mistake 2: Filename as Alt Text

html
<!-- Bad -->
<img alt="IMG_4532.jpg">
<img alt="hero-banner-v2-final.png">

<!-- Good -->
<img alt="Mountain landscape with snow-capped peaks">

Mistake 3: Missing Alt Attribute Entirely

html
<!-- Bad - No alt attribute -->
<img src="photo.jpg">

<!-- Good - Alt attribute present -->
<img src="photo.jpg" alt="Description here">

Mistake 4: Using "Image" for Decorative Images

html
<!-- Bad -->
<img src="decorative.png" alt="image">
<img src="separator.png" alt="decorative image">

<!-- Good -->
<img src="decorative.png" alt="">

Framework-Specific Examples

React

jsx
// Standard image
<img src={productImage} alt="Blue wireless headphones with carrying case" />

// Dynamic alt text
<img 
  src={product.image} 
  alt={`${product.name} - ${product.color}`} 
/>

// Next.js Image component
import Image from 'next/image';
<Image 
  src="/team.jpg" 
  alt="Engineering team at quarterly planning session"
  width={800}
  height={600}
/>

Vue

vue
<template>
  <img :src="product.image" :alt="productAltText" />
</template>

<script>
export default {
  computed: {
    productAltText() {
      return `${this.product.name} in ${this.product.color}`;
    }
  }
}
</script>

Testing Alt Text

  1. Screen Reader Testing: Listen to how images are announced
  2. Disable Images: Browse your site with images off
  3. Automated Tools: Use AccessibilityMonitor to find missing alt text
  4. Alt Text Review: Have someone unfamiliar with the site review descriptions

Alt Text Checklist

  • Every <img> has an alt attribute
  • Informative images have descriptive alt text
  • Decorative images have alt=""
  • Functional images describe the action
  • Alt text doesn't repeat surrounding text
  • Complex images have extended descriptions
  • Alt text is concise (generally under 125 characters)

Was this article helpful?