Accessible Images — Alt Text & Descriptive Graphics Guide

In this tutorial, you'll learn about Accessible Images. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Images convey information visually, but for blind and low-vision users that information must be provided as text alternatives. Accessible media extends to video captions, audio transcripts, and carefully managed animations.

What You'll Learn

By the end of this guide, you will understand alt text for four image categories (decorative, informative, functional, and complex), using <figure> and <figcaption> for structured descriptions, longdesc and aria-describedby for complex images, WebVTT caption files for video, text transcripts for audio content, accessible animated GIF patterns, the prefers-reduced-motion media query, and Lazy Loading that works with screen readers.

Why Accessible Images Matter

Every image on your site is either informative (needs descriptive alt text), decorative (needs empty alt text), or functional (needs action-oriented alt text). Getting this wrong means screen reader users either miss critical information or are bombarded with irrelevant noise. At DodaTech, Doda Browser's DevTools image inspector shows exactly how each image is exposed to assistive technologies, including the computed accessible name and role.

Accessible Images Learning Path

flowchart LR
  A[Accessibility Overview] --> B[WCAG Compliance]
  B --> C[Color Contrast Guide]
  C --> D[Accessible Forms Guide]
  D --> E[Accessible Images]
  E --> F[Accessible Media]
  E:::current

  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px

{{< callout type="info" icon="sparkles" >}} Prerequisites: Basic HTML5 knowledge. Understanding of WCAG and screen readers from previous tutorials. {{< /callout >}}

Alt Text by Image Type

Decorative Images — Empty Alt

Decorative images add visual flair but do not convey information. They must have alt="" so screen readers skip them entirely:

<!-- Decorative border — hide from screen readers -->
<img src="decorative-border.SVG" alt="" role="presentation">

<!-- Icon next to visible text — redundant, hide it -->
<span>
  <img src="phone-icon.SVG" alt="" aria-hidden="true">
  Call us: 1-800-555-0199
</span>

<!-- ❌ Bad — alt text on a purely decorative image -->
<img src="spacer.png" alt="spacer">
<!-- Screen reader: "spacer, image" — wastes user time -->

Informative Images — Descriptive Alt

Informative images convey content. Alt text should describe what the image shows:

<!-- Photo — describe the subject -->
<img src="team-photo.jpg"
     alt="DodaTech engineering team of eight people around a conference table">

<!-- Chart — describe the data -->
<img src="revenue-chart.png"
     alt="Bar chart: Q1 2026 revenue $100K, Q2 $145K, Q3 projected $180K">

<!-- Screenshot — describe what the user should see -->
<img src="dashboard-screenshot.png"
     alt="Doda Browser Accessibility panel showing contrast checker with AA and AAA pass-fail indicators">

Functional Images — Action-Oriented Alt

When an image is inside a link or button, the alt text must describe the action, not the image:

<!-- Image link — alt describes the destination -->
<a href="/download-report">
  <img src="download-icon.SVG"
       alt="Download Q2 2026 revenue report (PDF, 2.4 MB)">
</a>

<!-- Image button — alt describes the action -->
<button onclick="printPage()">
  <img src="print-icon.SVG" alt="Print this page">
</button>

<!-- ❌ Bad — describes appearance, not function -->
<a href="/download-report">
  <img src="download-icon.SVG" alt="Download icon">
  <!-- Screen reader: "Download icon, link" — users do not know what happens -->
</a>

Complex Images — Structured Description

Complex images such as charts, maps, and diagrams need more than a short alt text:

<!-- Method 1: figure and figcaption -->
<figure>
  <img src="org-chart.png" alt="DodaTech organizational chart">
  <figcaption>
    <h3>Organizational Structure</h3>
    <ul>
      <li>CEO: Alex Chen</li>
      <li>Reports to CEO:
        <ul>
          <li>CTO: Sarah Johnson — Engineering, QA, DevOps</li>
          <li>CPO: Michael Park — Product, Design, Research</li>
          <li>CFO: Lisa Wong — Finance, Legal, HR</li>
        </ul>
      </li>
    </ul>
  </figcaption>
</figure>

<!-- Method 2: aria-describedby for on-page description -->
<img src="sales-chart.png"
     alt="Line chart showing 40% growth in Q2 2026"
     aria-describedby="chart-desc">
<div id="chart-desc" hidden>
  <p>Monthly sales: January $80K, February $85K, March $95K,
     April $100K, May $120K, June $145K.</p>
</div>

Video Captions and WebVTT

All video with speech must have synchronized captions for deaf and hard-of-hearing users:

# captions.vtt
WEBVTT

00:00:01.000 --> 00:00:05.000
Welcome to the DodaTech accessibility tutorial series.

00:00:05.500 --> 00:00:10.000
Today we are learning about accessible images and media.

00:00:10.500 --> 00:00:15.000
Over 285 million people worldwide have visual impairments.

<video controls preload="metadata" poster="tutorial-thumb.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en"
         label="English captions" default>
  <track kind="subtitles" src="subtitles-es.vtt"
         srclang="es" label="Spanish subtitles">
  <track kind="descriptions" src="descriptions.vtt"
         srclang="en" label="English audio descriptions">
  <p>
    Your browser does not support HTML5 video.
    <a href="tutorial.mp4">Download the video</a>
  </p>
</video>

Audio description tracks describe visual information during natural pauses in the video. For example: "[The instructor points to a chart showing 40 percent revenue growth]."

Audio Transcripts

Every audio recording needs a text transcript:

<audio controls>
  <source src="podcast-episode-42.mp3" type="audio/mp3">
  <p><a href="podcast-episode-42.mp3">Download the episode (32 MB)</a></p>
</audio>

<section aria-label="Episode transcript">
  <h2>Transcript</h2>
  <p><strong>Host:</strong> Welcome to the DodaTech Accessibility Podcast.</p>
  <p><strong>Guest:</strong> Today we are discussing WCAG 2.2 Compliance strategies.</p>
  <p><em>[Full transcript continues...]</em></p>
</section>

Animated GIFs and Motion

Animations can cause Accessibility issues for users with vestibular disorders and cognitive disabilities:

/* ❌ Bad — auto-playing animation with no controls */
<img src="spinning-loader.gif" alt="Loading...">

/* ✅ Good — respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-gif { display: none; }
  .static-fallback { display: block; }
}

Image Accessibility Audit Script

// image-audit.js — paste in DevTools console
(function auditImages() {
  const issues = [];
  document.querySelectorAll('img').forEach((img, i) => {
    const alt = img.getAttribute('alt');
    const src = img.getAttribute('src') || `#${i}`;

    if (!img.hasAttribute('alt')) {
      issues.push({ severity: 'CRITICAL', img: src,
        issue: 'Missing alt attribute — screen reader reads file name',
        fix: 'Add alt="description" or alt="" for decorative' });
    } else if (alt === null || alt === undefined) {
      issues.push({ severity: 'CRITICAL', img: src,
        issue: 'alt="" set incorrectly', fix: 'Use meaningful text or empty string' });
    } else if (alt && /^(image|picture|photo|graphic)\s+(of|showing)/i.test(alt)) {
      issues.push({ severity: 'MINOR', img: src,
        issue: 'Redundant "image of" prefix', fix: 'Remove prefix — screen readers announce "image" automatically' });
    }
  });
  if (issues.length === 0) {
    console.log('✅ All images have appropriate alt text');
  } else {
    console.table(issues);
  }
})();

Expected output: A console table listing every image with missing, improperly set, or redundantly prefixed alt text, categorized by severity.

Common Images and Media Mistakes

1. Missing Alt on Informative Images

Without alt, screen readers announce the raw file name: "chart-q2-dot-png." Users have no idea what the image shows.

2. Empty Alt on Informative Images

alt="" on a chart or diagram tells screen readers to skip it entirely, hiding critical information from blind users.

3. Alt Text on Decorative Images

alt="border" or alt="spacer" forces screen readers to announce meaningless content. Use alt="" for all decorative images.

4. Text Inside Images

Images of text fail when text needs translation, resizing, or screen reader access. Use real HTML text with CSS styling instead.

5. Videos Without Captions

A video with speech but no captions is completely inaccessible to deaf users. Always provide synchronized captions via <track kind="captions">.

6. Audio Without Transcript

A podcast or audio recording without a transcript excludes deaf users and users who cannot play audio. Always provide a text transcript.

7. Auto-Playing Animations

Auto-playing GIFs or videos cannot be paused by screen reader users and may trigger vestibular disorders. Add play or pause controls or use static fallbacks.

Practice Questions

1. When should you use empty alt text (alt="")? For decorative images that do not convey information — borders, spacers, icons that repeat adjacent visible text. Screen readers skip these.

2. What is the difference between alt text for a decorative versus an informative image? Decorative: alt="" to hide from screen readers entirely. Informative: describe the content or data the image shows in a concise but complete way.

3. What is WebVTT and how is it used? WebVTT (Web Video Text Tracks) is a format for timed captions and subtitles. It is used with the <track> element inside <video> to provide synchronized text tracks.

4. What does the prefers-reduced-motion media query do? It detects whether the user has set their operating system to prefer reduced motion. You can then disable or simplify animations, auto-playing GIFs, and parallax effects.

5. Challenge: Take a complex infographic with multiple panels and write both a concise alt text (under 15 words) and a detailed long description using aria-describedby. Test your description with a screen reader.

Real-World Task

Audit your entire website for image Accessibility. For every <img> element, check whether the alt attribute is present, whether the text is appropriate for the image type (informative versus decorative), and whether complex images have detailed descriptions. Fix all issues and test with NVDA or VoiceOver.

FAQ

Try It Yourself

Build an inline image Accessibility checker:

// inline-image-checker.js
(function() {
  const panel = document.createElement('div');
  panel.style.cssText = 'position:fixed;top:10px;right:10px;max-width:500px;' +
    'max-height:80vh;overflow-y:auto;background:#fff;border:2px SOLID #333;' +
    'border-radius:8px;padding:12px;z-index:99999;font-family:sans-serif;' +
    'box-shadow:0 4px 12px rgba(0,0,0,0.3)';
  panel.innerHTML = '<h3 style="margin:0 0 8px">Image Accessibility Audit</h3>';
  document.body.appendChild(panel);

  document.querySelectorAll('img').forEach((img, i) => {
    const div = document.createElement('div');
    div.style.cssText = 'padding:4px 8px;margin:2px 0;border-radius:4px;font-size:12px';
    const alt = img.getAttribute('alt');
    const src = img.getAttribute('src')?.substring(0, 40) || '(no src)';
    if (!img.hasAttribute('alt')) {
      div.textContent = `❌ [${i}] ${src} — MISSING ALT`;
      div.style.background = '#fdd';
    } else if (alt === '') {
      div.textContent = `➖ [${i}] ${src} — Decorative (empty alt)`;
      div.style.background = '#ffe';
    } else if (alt.length < 5) {
      div.textContent = `⚠️ [${i}] ${src} — Short alt: "${alt}"`;
      div.style.background = '#ffd';
    } else {
      div.textContent = `✅ [${i}] ${src} — Alt: "${alt?.substring(0, 30)}"`;
      div.style.background = '#dfd';
    }
    panel.appendChild(div);
  });
})();

Expected behavior: A floating panel shows every image on the page with its alt attribute status — missing, empty, short, or good — color-coded for quick scanning.

What's Next

Congratulations on completing this Accessible Images guide! Here is where to Go from here:

• Practice daily — Write meaningful alt text for every image you add
• Build a project — Create an automated alt-text review system for your team
• Explore related topics — Learn accessible media next
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!