Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 4 OF 5 · Foundations

Images and alt text

Compare decorative, informative, and functional images with different text alternatives.

  • Level: Beginner
  • Time: 5-10 minutes
Objective

Decide when images need empty, descriptive, or functional text alternatives.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Navigate through the images and image link. Decide whether each text alternative fits its purpose.

Deployment complete.

Download accessibility report
Accessibility issue status

Expected behavior: decorative images are skipped, functional images have functional text, and informative images convey their information.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Navigate through the images and image link. Determine whether each image has a useful equivalent.

green check icon small square Deployment complete.

Accessibility issue status
Hint

Ask whether the text alternative communicates the image’s purpose, not its file or decoration.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is wrong with the defective image alternatives?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective example over-describes a decorative icon, gives an image-only link no accessible purpose, and labels a chart only as “chart” without the chart’s information.

Repair

Use empty alt text for decorative images. Make functional images communicate the action. Give informative images a text alternative that conveys the relevant information.

<img src="check.svg" alt=""> Deployment complete
<a href="/report.pdf">
  <img src="download.svg" alt="">
  Download accessibility report
</a>

Retest

  • Navigate by graphics and confirm decorative images do not add noise.
  • Navigate links and confirm image-only or image-led links have clear purpose.
  • Confirm informative images have an equivalent that matches the page task.

Report it

Example: The download icon link has no accessible name, so screen reader users cannot determine that it downloads the accessibility report.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.