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.

What is Alternative text?

Alternative text (or alt-text) is text provided for images so that if the student is unable to see the image context for what is not visible is given.  

Why is alternate text important?

image not present icon - Google Search - Google Chrome

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 or due to another 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 these situations, basic alt-text is still recommended as shown in the examples below.

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

Basic Rules for Alt-Text

A brown beaver chewing a log for a dam
  • Alt-text should always be less than 251 characters.  eCourses will not permit more than 250 characters in an alt-text field and it will warn is it is more than 120 characters.
  • The viewer should be able to interpret what is missing and determine if they should seek out an alternative source of the image
  • The context of the image is important.  
    • An image of a beaver working on a dam may be a decorative image in one class or lesson, but a content based item in another.
    • In a lesson focusing on the specific type of beaver the alt text would specify the sub species: A north American beaver (Castor canadensis) working a dam.
    • In a lesson focused on the behavior of the beaver it may say:  A beaver chewing a log to build a dam
  • Flowcharts, graphs, and images that convey detailed information require long descriptions (sometimes called captions) placed near the image or linked out to a page that contains it.  

Decorative Image: Example 1

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.  However, it is better to mark it as Human Brain Diagram so if a user can not see it due to technical issue, they are aware of what is not displaying.

Slide of the Brain and Spinal Cord: Structure and Function with a cartoon image of a Human Brain.

Decorative Image: Example 2

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.  Again, the best solution is to put FERPA Guide for Zoom in the Alt-Text, so if a user sees a image not showing icon, it is clear what is missing.

Ferpa Guide Zoom header image from a pdf document

Example 3: Basic Image

A giant panda eating bamboo (left) and a red panda with reddish-brown fur and white markings (right).

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: Side-by-side: A giant panda eating bamboo (left) and a red panda with reddish-brown fur and white markings (right).

Example 4: Information Image

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

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.

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 slide 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

Data Table Long Description

Grain TypeGrain Size (MM)Description/Texture Representation
Pebble> 4 mmlarge cicles
Granule2.1 mm to 4 mmMedium circles
Very Coarse Sand.51 mm to 2 mmDots, widely spaced
Medium Sand.26 mm to .5 mmFine dots, closely spaced
Fine Sand.126 mm to .25 mmVery fine dots, dense pattern
Very Fine Sand.063 mm to .125 mmCross-hatched texture
Silt/Clay (Mud)<. 063 mmSolid gray shading

Example 5: Math Notation

The math formula below is an image.  Mathematical formulas should never be submitted as images.  Instead use the Office Equation Editor or Latex.  It is better to build and save in Word or PowerPoint than PDF.  PDFs are far more difficult to make edits in.

Even when mathematical notation is correctly entered in an equation editor format, screen readers won't read them correctly so it's best to add alternative text.

The fraction delta y over delta x, multiplied by T, minus 33x times the double integral of the hyperbolic sine of the fraction (x minus 1) over (x squared plus y minus 3x).

The alt-text would be: The fraction delta y over delta x, multiplied by T, minus 33x times the double integral of the hyperbolic sine of the fraction (x minus 1) over (x squared plus y minus 3x).

Long Description vs. Alt-Text

Example 6: Complex Image

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.

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 description was generated in Gemini 2.5 Flash.

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.

Using AI to write Alt-Text and Long Descriptions

Generative AI Tools like Copliot, ChatGPT or Perplexity can be used to accelerate the process  of writing alternative-text.  For items that are embedded in eCourses HTML pages, Ally provides a button to suggest alt-text directly below the image.  For images in PDF and Office documents copy the image with the windows snipping tool  (windows key + Shift + S) or mac screenshot toolbar (Shift+ Cmd + 5).   Upload the image into the AI tool with this text

Alt Text prompt: Provide alt-text for this image in 140 characters or less.

Long description prompt: Provide a long description for this image to convey the context to a user that is unable to see the image

Video Detailing how to Write Alt-Text in Complex Scenarios

This video explains solutions to several complex scenarios requiring alt-text.

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