Table of Contents

Accessible Images Using Alt Text and Long Descriptions

Markette Pierce Updated by Markette Pierce

How To Describe Complex Images

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

  • graphs and charts, including flow charts and organizational charts;
  • diagrams and illustrations where the page text relies on the user being able to understand the image;
  • maps showing locations or other information such as weather systems.
  • Math equations
  • Flow charts/concept maps

Handling Alt Text

Alternative text should:

  • present the CONTENT and FUNCTION of the image.
  • be succinct.

Alternative text should not:

  • be redundant (be the same as adjacent or body text).
  • use the phrases "image of…" or "graphic of…".

Appropriate alternative text depends heavily on the image's context.

  • The alternative content can often be presented within the context of the page, such as in an adjacent data table. 
  • The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page.
  • Some images are decorative and will not require alt text. See below for more details.
Marking an Image as Decorative in Canvas

Images that do not create meaning for a learner – such as faculty headshots, course logos, or other truly decorative images – should be marked as decorative and will not include alt text. Follow these steps to make images decorative in Canvas:

  1. From the rich content editor, click the image and select Image Options.
  2. Leave the Alt Text field blank, and check the box next to Decorative Image.
  1. Click Done.

Alt Text Short Description

Including a short alt text descriptions for images helps aid users with visual impairments, enhances the user experience for all, and is one of the pieces to being compliant with accessibility standards. It should be included for images that relate to the content. Otherwise, it can be marked as decorative.

Long Description

When a complex image needs a fairly long description to properly describe the content. In this case the recommendation is to include a short summary in the ALT tag which points to or links blind users to a long text description which fully explains the image.

<img src=“image-source-location-goes-here” alt=“alt text goes here” longdesc=“long description goes here”/>

Examples

Technical Illustration

ALT Text short description: 

Velocity profile of laminar flow in a pipe.

Long Description:

This diagram shows fluid flowing through a pipe along the x-axis in parallel layers with minimal disruption. Velocity arrows are shorter on the edges, representing a slower velocity vx and longer in the center, representing a faster. The edges of the arrow form a parabola and represent the "velocity profile."

Note: Only those visual details needed for understanding the concept are included in the long description
Diagrams

Alt text:

Pie chart showing the career outcomes for 41 PhD students from the last 10 years of the WSU BTP. It shows who earned their PhD went on to work in biotech companies (32%), begin post-doc research (22%), or are currently looking for work (12%).

Long Description:

The pie chart shows the career outcomes for 41 PhD students from the last 10 years of the WSU BTP.

Career Outcome

Percentage

Academic Instructor

2%

Assistant Professor

7%

Biotech Companies

32%

Entrepreneurs (started own Biotech business)

5%

Government Laboratories

7%

Looking for Employment (recent 2015 grads)

12%

Medical Research Labs

3%

Pharmaceutical Companies

5%

Post-Doc

22%

Private Research Institutes

3%

Other

How did we do?

Accessible Excel Files

Contact