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?
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
- 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.
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.
Example 3: Basic Image
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
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 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 |
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 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.
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