Most images can be made accessible using using alternative (alt) text descriptions. But more complex images require more description than the limited one or two brief sentences that may be used in the image alternative text attribute.
Listed below are techniques on how to provide additional description to complex images (including graphs, maps, diagrams and charts.)
What information should you include or exclude from alternative text descriptions? See the DIAGRAM Center's alt text resource.
Use a caption
For Web Pages: Your caption must be associated with the image, so make sure to properly 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>
For MS Word and PowerPoint: Right clicking on the image and select Add Caption.
Describe the image in surrounding text
If it 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 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" />
Link to a webpage with a long 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" 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" />
Here's a video on how a screen reader reads a long descriptions.
Sometimes touching a model or a tactile graphic is the best way to describe something.
- 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. The Adaptive Technolgoy Center can help you create tactile graphics for your courses. Please contact them at email@example.com or 615-904-8550 for more information.
Indicate if a model is available
- 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. The Adaptive Technolgoy Center can help you create 3D figures for your courses. Please contact them at firstname.lastname@example.org or 615-904-8550 for more information.
Sounds can sometimes be used to differentiate variation in slope.
- Diagram Center: Information on how to describe complex images
My question is not answered here. What do I do?
- Email email@example.com
- Call: 615-904-8189
- Send your question or request some individualized instruction
Information for this page was adapted from PCC's website and is based on the Creative Commons license.