Graphs, Etc.

Instructional Accessibility

Students

Faculty

Complex Images

Most images can be made accessible using using alternative (alt) text descriptions. But more complex images (like the Washington Metro routes shown above) require more description than the limited one or two brief sentences that may be used in the image alternative text attribute.

text icon Text-based Descriptions

touch icon Tactile representations

hearing icon Audible representations

Text-based Description

Back to 🔝

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  in Stonewall, TX</em> </figcaption> </figure>

    See video on how a screen reader reads a caption

    For MS Word and PowerPoint: Right click 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" />

    See this  example of a screen reader reading the surrounding text and how to use the aria-describedby property.

  • 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.

Description Resources

Tactile Representations

Back to 🔝

Sometimes touching a model or a tactile graphic is the best way to describe 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.

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.

Audible Representations

Back to 🔝

Sounds can sometimes be used to differentiate variation in slope.

  • Desmos: This is an exciting tool that provides accessible and audible graphing tools.
  • MathTrax: a graphing tool that works with screen readers.

Recent News

  • Vanderbilt Poll: Post-election, core concerns and views of Tennesseans persist

    Vanderbilt Poll: Post-election, core concerns and views of Tennesseans persist

    Read More

  • Vanderbilt secures four prestigious NEH grants

    Read More

  • Vanderbilt’s Keivan Stassun named 2024 MacArthur fellow

    Vanderbilt’s Keivan Stassun named 2024 MacArthur fellow

    Read More

  • Quest to develop fully autonomous surgical robot attracts award up to $12 million from ARPA-H

    Quest to develop fully autonomous surgical robot attracts award up to $12 million from ARPA-H

    Read More

  • Vanderbilt University launches Institute of National Security to counter threats, cultivate leaders

    Vanderbilt University launches Institute of National Security to counter threats, cultivate leaders

    Read More