CIITS Help Docs

Writing Quality Alt-Text

Updated on

This tutorial on how to write quality alt-text for instructional materials.  To see how to technically enter alt-text  refer to the guide on Entering Alt-Text in PDFS & MS Office Products

Alternative text is required for every non-decorative static image included in any digital file.  The purpose of alternative text is to provide concise descriptions that explain the purpose of the inclusion of the image in context for instructional purposes.  

This tutorial is on strategies for writing alt-text.  Refer to our Guide on Entering Alt-Text as needed.

Why is alternate text important?

Technological Reason: Not all images render on all devices and it is impossible to know in advance which students will not be able to see them.  Alt-Text allows a student who can not see an image to know what the image is and when possible what content it portrays.  This is more common than you might suspect.

Physical Reason: A student has low or no vision and due to a physical trait  and can never perceive the image even if properly rendered technologically.

What is a Decorative Image?

A decorative image is one that has no instructional purpose.  They include

  • Images of text that is already repeated nearby  (Ex: Figure 1 is listed in text below an image that also says Figure 1).
  • Stylistic borders, dividers, and spacers
  • Icons next to text labels
  • Images that are purely "eye candy" or serve to add a visual element to a slide, but does not enhance the instructional content.

In this slide the picture of the human brain conveys no additional information than the text.  So it could be marked as a decorative image.

Before marking an image a decorative, ensure it provides no instructional value or is fully redundant based on text on the side or document.

The image of the student working at a computer is decorative as it does not enhance the concept of FERPA nor is it related to the instructional material included in the document.  The ZOOM image, however should have the Alt-Text ZOOM as it describes the focus of the document.

FERPA Guide.pdf - Adobe Acrobat (64-bit)

Example 1: Basic Image

red panda vs panda - Google Search - Google Chrome

Assume the slide indicates:

Giant pandas differ from red pandas.  They are not closely related, though they both have a fondness for bamboo.

Appropriate Alt-Text: A giant panda has black and white fur, a round face, and a stocky body as it eats a bamboo stalk. A red panda has red-brown fur, a pointed snout, a fluffy tail, and is much smaller with a slender build.

Example 2: Informational Image

This image shows the break between different sizes of grains.  Alternative text must provide a substitute for the missing image based on instructional purposes.

Assume the Slides this image is located on says this in text:

  • Silt/Class smaller than .063 mm
  • Sand .063 mm to 2 mm
  • Granule/Pebble > 2 mm

What should the alt-text be?

It depends on if you want students to know all the breakdowns shown in the graphic or if the graphic is only to support the written text.

If the student needs to know the breakdown of all 8 categories in this image, alt-text is used to briefly describe the image AND a datatable with the information conveyed in the image is added to the slide or a subsequent slide.

For Example: Chart showing grain size classifications from pebbles to silt/clay with corresponding particle size ranges and textures.

However, a data chart should also be included on the slide or subsequent slide in text indicating the breakdowns for each section.

Chart showing grain size classifications from pebbles to silt/clay with corresponding particle size ranges and textures.

Data Table Long Description

A Long Description is necessary if the information in the graphic can not be captured in 1 to 2 sentences - roughly 250 characters.  In this situation IF the student needs to be able to identify the different grain sizes for all categories a second slide would be necessary that looks as the table below.

Grain Type Grain Size (MM) Description/Texture Representation
Pebble > 4 mm large cicles
Granule 2.1 mm to 4 mm Medium circles
Very Coarse Sand .51 mm to 2 mm Dots, widely spaced
Medium Sand .26 mm to .5 mm Fine dots, closely spaced
Fine Sand .126 mm to .25 mm Very fine dots, dense pattern
Very Fine Sand .063 mm to .125 mm Cross-hatched texture
Silt/Clay (Mud) <. 063 mm Solid gray shading

Long Description vs. Alt-Text

Principles of Macroeconomics 2e, Demand and Supply, Demand, Supply, and Equilibrium in Markets for Goods and Services | OpenEd CUNY - Google Chrome

Alt-text should be limited to roughly no more than 256 characters or 1 to 2 sentences.  If an image can not be summed up in that amount of text a long description is required. The diagram above is too complex to capture in alt-text so a long description becomes necessary.

Alt-Text: A supply and demand curve showing quantity of gasoline in millions so gallons with an equilibrium price of $1.40.  Other equilibrium points are shown.  See long description for more details.

Long Description: (On another slide or page).

This diagram is a supply and demand graph showing the gasoline market.

  • Axes:
    • The vertical axis represents price in dollars per gallon, ranging from $0.60 to $2.20.
    • The horizontal axis represents quantity of gasoline in millions of gallons, ranging from 300 to 900.
  • Curves:
    • The supply curve (S) slopes upward.
    • The demand curve (D) slopes downward.
    • They intersect at point E, the equilibrium.
  • Equilibrium:
    • Price: $1.40 per gallon.
    • Quantity: 600 million gallons.
  • Above equilibrium:
    • At a price of $1.80 per gallon, supply is greater than demand.
    • This creates excess supply or surplus.
  • Below equilibrium:
    • At a price of $1.20 per gallon, demand is greater than supply.
    • This creates excess demand or shortage.
  • Labels on the graph mark:
    • “An above-equilibrium price” near surplus.
    • “A below-equilibrium price” near shortage.

Overview Video of How to Write Alt-Text

These are many different alt-text scenarios.  The video provides solutions to many.  Use the video sections to find your specific issue.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article How to Use Ally in eCourses
Next Article Creating Captions & Transcripts with Canvas Studio
Want Help from a Human? Contact Us