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>
</figcaption>
</figure>
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" />
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="http://www.karensorensen.com/johnson-long-desc.html"
width="400" height="290" />
Video: How a screen reader reads long descriptions.
Description Resources
- How Do We Access Meaning in Art? (Describing art images in alt text)
- Diagram Center's Accessible Image Sample Book
- NWEA Image Description Guidelines for Assessments (Math and Science)
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
- Esref Armagan, The Man Who Sees With His Fingers Trailer.
- How Does A Blind Man Paint?
- Diagram Center: Information on how to describe complex images