Accessibility Testing Lab home
Accessibility Testing LabA hands-on environment for practising accessibility testing

Evaluating image alternative text in context

Compare meaningful, decorative, linked, missing, and broken-image alternatives on a community-volunteering page.

Difficulty:
beginner
Estimated time:
20 minutes

Objectives

  • Classify image purpose before judging its alternative text.
  • Compare visual information, screen-reader output, surrounding context, and linked-image destinations.
  • Distinguish an explicitly empty decorative alternative from a missing attribute.
  • Observe useful alternative text when an image resource fails to load.

Instructions

Use the Testing image alternative text method to review the community-volunteering page. Start the exercise from the Exercise workspace.

  1. Review the page visually and predict why each image is present.
  2. Navigate through images and links with a screen reader and compare each announcement with the visible image, nearby content, and destination.
  3. Inspect markup where you need to distinguish a missing attribute from an intentionally empty alternative.
  4. Observe the deliberately broken image visually and with your screen reader.
  5. Identify exactly four accessibility findings and three passing checks.
  6. For each finding, record the image, purpose, context, current output or silence, expected result, and remediation direction.

The broken image is intentional but is not one of the four findings. Browser fallback appearance and exact screen-reader phrasing can differ, so assess whether the useful alternative remains available rather than expecting one exact presentation.

Exercise workspace

Community volunteering image alternative text exercise

Start exercise

The exercise opens on a separate page. Return to this page whenever you need a hint, or when you are ready to continue and review the solution.

You can open the exercise in a new tab if you want to keep these instructions and hints available.

Hints
  1. Decide why each image exists in this page before judging whether its wording is useful.
  2. Compare the silent decorative case with the markup of images that are missing or exposing text.
  3. Inspect the linked logo and broken image as destination and fallback cases rather than ordinary photographs.
Solution

The page contains four findings. The contextual volunteer image, explicitly empty decorative flourish, and broken image with useful alternative text are three passing checks rather than defects.

The riverside photograph has a vague alternative

Water is technically related to the photograph but does not communicate why the image appears in the cleanup story. Describe the relevant riverside condition or activity concisely, based on what the image contributes beyond the nearby text.

A decorative flourish is announced unnecessarily

The blue wave flourish adds visual styling but no information, yet its non-empty alternative adds noise to screen-reader navigation. Give a purely decorative img an empty alt attribute so it is ignored.

The linked logo does not identify its destination

The image link is named only Logo, which does not tell someone where activation leads. Name the linked image for the organization or destination, such as Community Action Network home, rather than describing only its visual type.

The meeting-point image has no alt attribute

The location graphic contributes the Riverside Community Centre meeting point but has no alt attribute. Provide a concise alternative that communicates the relevant location information, while keeping the same information available in nearby text.