Images and Screen Readers — How Assistive Technology Handles Visual Content

In this tutorial, you will learn about Images and Screen Readers. We cover key concepts, practical examples, and best practices to help you master this topic.

Screen readers announce images based on alt text, skipping decorative images with empty alt and reading descriptive alt for informative images, making alt text a critical Accessibility requirement.

In this tutorial, you'll learn how Screen Readers handle images.

What You'll Learn

By the end of this lesson, you'll understand how screen readers announce images, how to write effective alt text, how to handle decorative images, and how to test image accessibility.

Why It Matters

Images without alt text are announced as "image" or "graphic" with no context. Users miss critical information when alt text is missing or poor.

Real-World Use

DodaTech's content team follows strict alt text guidelines for all screenshots, diagrams, and icons in documentation.

Image Announcement Flow

flowchart TD
  A[Screen reader encounters image] --> B{alt attribute present?}
  B -->|No alt| C["Announced as 'image' or 'graphic'"]
  B -->|Empty alt| D[Skipped entirely]
  B -->|Descriptive alt| E[Announces alt text]
  D --> F[User never knows image exists]
  E --> G[User hears descriptive content]
  C --> H[User has no information]
  H --> I[Content gap for user]

Alt Text Best Practices

<!-- Good: informative, concise alt text -->
<img src="scan-results.png" alt="Scan results showing 3 threats found and 245 files scanned" />

<!-- Bad: redundant or missing alt -->
<img src="scan-results.png" alt="image" />       <!-- redundant -->
<img src="scan-results.png" />                    <!-- missing -->
<img src="scan-results.png" alt="Scan results showing 3 threats found and 245 files scanned out of 1000 total files in the system scan that completed at 3:45 PM" />  <!-- too long -->

<!-- Decorative: empty alt -->
<img src="decorative-line.png" alt="" role="presentation" />

Image Types and Alt Text

Informative Images

<img src="chart.png" alt="Bar chart showing a 50% increase in detected threats this quarter" />

Functional Images (links, buttons)

<a href="/scan">
  <img src="scan-icon.png" alt="Start system scan" />
</a>

Decorative Images

<img src="background-swirl.png" alt="" />

Complex Images (charts, diagrams)

<img src="architecture.png" alt="System architecture diagram showing frontend, API, and database layers" />
<a href="architecture-description.html">Full architecture description</a>

Testing Images With Screen Readers

// Check images for alt text
document.querySelectorAll('img').forEach(img => {
  if (!img.hasAttribute('alt')) {
    console.warn('Missing alt text:', img.src);
  } else if (img.alt === '' && !img.getAttribute('role') === 'presentation') {
    console.info('Decorative image:', img.src);
  } else if (img.alt.length > 150) {
    console.warn('Overly long alt text:', img.src);
  }
});

Common Mistakes

• Missing alt attribute: The image is announced as "image" with no context.
• File name as alt text: alt="IMG_1234.jpg" is unhelpful.
• "Image of" or "picture of" in alt text: Screen readers already announce it as an image.
• Empty alt on informative images: Users miss critical content.
• Non-empty alt on decorative images: Users hear irrelevant descriptions.

Practice and Challenge

1. How does a screen reader announce <img src="photo.jpg"> with no alt? As "image" or "graphic" with no descriptive content.

2. What does empty alt (alt="") do? Tells the screen reader to skip the image entirely.

3. What is the recommended maximum length for alt text? Around 150 characters or less.

4. Should you include "image of" in alt text? No. Screen readers already announce it as an image.

5. Challenge: Audit all images on your website. For each, determine if it is informative or decorative and write appropriate alt text.

FAQ

Mini Project

Perform a complete image accessibility audit on your website. Categorize every image as informative, functional, decorative, or complex. Write correct alt text for each.

What's Next

Continue to Testing With Screen Readers to create a systematic testing workflow.