DESCRIBING A COMPLEX IMAGE

When we discussed how to write alt text, we provided the following guidance:

Describe the purpose of the image on the page.
Use precise language.
Be concise.
Reproduce any text on the image exactly in the alt text or surrounding text content.

For many images, this is a straightforward process. There are, however, a number of special cases. Consider this diagram of the water cycle (source: Wikimedia Commons).

This image includes a number of labeled items, such as "Water table" and "Infiltration." It includes images of clouds, lakes, etc. It includes arrows, both in a circular pattern and coming up from the ground.

How could you ever describe this diagram precisely, concisely, and reproduce the text on the image? You can't, which is why it's critical to return to the first bullet: Describe the purpose of the image on the page.

If this image is on a page teaching students about the water cycle, then its purpose is likely to illustrate the relationships and processes of the water cycle.

For this image to be accessible, you would need to provide text that discusses the relationships and processes of the water cycle. Notably, that text doesn't need to be alt text. You can provide that explanation in the surrounding text. This is our recommendation, as it benefits all learners to have a text summary. The other solutions for complex images, such as long descriptions or captions, require some technical knowledge of web code, so providing this information in the surrounding text is also easier for you.

ACCESSIBILITY FOR EVERYONE

Summarizing a complex visual in the surrounding text helps all users, including those who process text better than dense visuals.

Reading the surrounding text for the image, look for a portion of the text that specifically summarizes the information from the image. For instance, if you write about each stage of the water cycle across 10 paragraphs, that would not be sufficient, as that information is spread throughout the page. What would be accessible is including those 10 paragraphs then following them up with a summary of the water cycle, indicating the various stages covered in the diagram. In this way, the information provided by the diagram is condensed and accessible by both sighted and blind users.

Be careful to not omit something covered in the image. For instance, if your text doesn't discuss the water table, but the diagram includes it, then you have an accessibility issue. If there is something that is covered by the image but you don't think is necessary to include in the surrounding text, you can include that in the image alt text. For example, if the surrounding text doesn't include the water table, your alt text could be: "Diagram of water cycle - water table is fed through groundwater infiltration."

This text description can be before the image or after the image, but make sure it isn't completely separated on the page. It's also a good idea to clearly label the description, such as through a section heading, as this helps all students locate the information.

ACCESSIBILITY ADVICE FOR SPECIFIC TYPES OF IMAGES

While we can't cover all image types here, what follows is advice on some of the more common types of images.

Maps: For simpler maps illustrating a particular point, use a text description. For complex maps, a tactile alternative, such as a 3D map, is preferred.
Comics and Cartoons: Comics and cartoons should include descriptions of each panel, with enough detail to sufficiently understand the idea, joke, or narrative of the comic.
Graphs: Many graphs can be converted to an accessible table display. Provide numbers of each pie wedge, bar, point, etc. Additionally, provide a description that conveys the overall purpose of the graph and why it is included with the text.
Art: A good guide here can be museum plaques. Provide the medium, artist, any historical context, and a description of the work of art.
Musical Notation: Musical notation can be made accessible through MusicXML. Also include digital music files, such as .mp3 files.
Diagrams and Flowcharts: These are often best described through bulleted lists with descriptions for each item in the diagram or flowchart. You may also want to display the information in a data table, depending on the type of diagram.

For a more detailed look at different types of images, visit the Poet Training Tool, an in-depth resource provided by the Diagram Center, an organization focused on educational accessibility. They have recommendations and advice for almost any image possible, such as nutrition labels, scatter plots, timelines, and more.

Quick Recap

Describe complex images in the surrounding text (rather than alt text), making sure to provide equivalent textual representation for the purpose of the image.

Further Reading

Accessible Image Sample Book
Describing Science Images for Learners with Disabilities
Effective Practices for Description of Science Content within Digital Talking Books