Adding a Long Description

Code Snippet Library

An informative image often requires more description than the alt text allows (ideally 120 characters), so a longer description needs to be added. There are two ways to do this. You can include it on the page with the image in a show/hide toggle or link a document below the image. 

 

Long Description in a Show/Hide Toggle

Flowchart of the Learning Design accommodation work process
Accommodation Work Process Long Description (Image Source: Matt Farley)

This is a flowchart that describes the accommodation work process. 

The instructional designer is notified in one of two ways: 

  1. Email from the manager of access
  2. Email from the instructor

The instructional designer takes action based on the email:

  • Replies to email
  • Submits an accessibility ticket
  • Extends exam time
  • Sends readings to Disability Services

The consultant reviews the course and generates a report. 

  • Are changes needed to course content?
    • Yes
      • The consultant meets with the design team to review issues and divide work
      • Work is done
      • Consultant sends the ticket back to the owner to close.
    • No
      • Consultant sends the ticket back to the owner to close.
Code for Expandable Long Description 
<figure style="margin: 2.5rem auto; width: 80%;">
    <img src="ImageLink" alt="Short description of the image" style="width: 100%; border: 1px solid #000000;" />
    <figcaption>
        <details style="border: 1px solid #DDDCE0; padding: 15px;">
            <summary>Image Caption Text Description</summary>
            <p>Full description of the image. This may include a list (this works well for flowcharts) or a table (works well for bar and line charts). </p>
        </details>
    </figcaption>
</figure>

Note: Both the image and the description have borders, and those can be removed or modified. 

 

Long Description in a Linked Document

Another good way to associate a description with an image is to link a document below it. 

Flowchart of the Learning Design accommodation work process
Download Accommodation Process Text Description

We recommend this workflow:

  1. Write the image description in a Word document.
  2. Give it a descriptive title, such as Accommodation Process Text Description.
  3. Upload it to the course, and link it below the image.
  4. In the Link Options, choose Preview inline so that the description can be opened on the page but does not overlay the image as it would with the default link setting.

People can view the document on the page in Preview mode or download it, and Word documents are easier to read than PDFs for people who use assistive technology.

 

Quick Tip: Seek guidance on describing images

Poet Image Description Training Links to an external site. is a very helpful resource for learning to describe images. The image description can be text can include other elements, such as lists or tables.