Make Complex Images Accessible

The goal of accessible learning is that a person with a disability will obtain the information as fully, equally, and independently as a person without a disability. When a learning setting is accessible, a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally effective and equally integrated manner, with substantially equivalent ease of use. 

Most images can be made accessible using alternative (alt) text descriptions. More complex images, though, require more description than the limited text (one or two brief sentences) that may be used in the image alternative text attribute.

Text-based Description

Listed below are techniques that can be used to provide additional descriptions for complex images (including graphs, maps, diagrams, and charts). These techniques are recommended by the Diagram Center, a leading source on image accessibility.

Use a caption

  • For Web Pages: Your caption must be associated with the image, so make sure to add a caption using the 'figcaption' html tag (requires HTML editing).

Example code:
<figure><img src="johnson-birthplace.jpg" alt=" " width="400" height="290" />
<figcaption><em>Karen at President Lyndon B. Johnson’s reconstructed birthplace
<br /> in Stonewall, TX</em>

Icon for a video.  Video: How a screen reader reads a caption.

  • For Microsoft Word and PowerPoint: Right-click on the image and select Add Caption.

Describe the image in surrounding text

If the image is adequately described in surrounding text (including text-based tables), just add a short alt text label or description, so it's clear what the image is depicting and the student can correlate the image with the description.

With HTML based images, you can provide further clarification by using the 'aria-describedby' property to tie that description to the image (requires HTML editing). 

Example code:
<img src="johnson-birthplace.jpg" width="400" height="290"
alt="Karen at President Lyndon B. Johnson’s birthplace" aria-describedby="johnson-birthplace" />

Icon for a video. Video: How a screen reader reads the surrounding text and how to use the 'aria-describedby' property.

Link out to a web page with a longer description

If the image cannot be adequately described in one or two brief sentences of alt text, and it cannot be described sufficiently in the surrounding text, use the 'longdesc' attribute (requires HTML editing). 

Example code:
<img src="johnson-birthplace.jpg" width="400" height="290" alt="Karen at President Lyndon B. Johnson’s reconstructed birthplace in Stonewall, TX" longdesc=""
width="400" height="290" />

Icon for a video. Video: How a screen reader reads long descriptions.

Description Resources

Tactile Representations

Sometimes touching a model or a tactile graphic is the best way to visualize something.

Tactile graphics

Tactile graphics have different sized raised dots to show variation in graphs, charts, and maps. The American Publishing House for the Blind has a tactile image library where you can purchase tactile images. Disability Services and Distance Learning also can help you create tactile graphics for your courses. Please contact the LSC Accessibility Department for more information.

Available models

If you know where a 3D model of the image is available, indicate that in your image caption or on the same page as the image.

Audible Representations

Sounds can sometimes be used to differentiate variation in slope.

Additional Resources