Microlearning Training
Demystifying
STEM Alt-Text
Ensuring Science, Tech, and Math visuals are descriptive, accurate, and accessible.
Learning Objectives
What You Will Achieve
Identify common digital barriers that hinder learning at the point of need.
Apply the 4 Rules of STEM Alt-Text to create inclusive descriptions.
Define the “instructional value” or point of the lesson in STEM visuals.
Collaborate with expert strategies to refine accessibility standards.
“When we design for disability first, we often stumble upon solutions that are beneficial to everyone.”
— Jenny Lay-Flurrie, Chief Accessibility Officer at Microsoft
01. The Big Picture
Inclusion is a Choice
Online learning brings amazing opportunities, but not everyone experiences it the same way. Students who have disabilities—or even those with temporary limitations like a broken arm—benefit when content is designed with accessibility in mind.
Web accessibility ensures everyone can access and use online content, regardless of their abilities or the technology they rely on. Simple design choices can significantly improve the user experience for everyone.
02. The ASU Mission
Who We Include
“ASU is measured not by whom it excludes, but by whom it includes and how they succeed.”
At Arizona State University, accessibility is a moral imperative. If we are to be known by who we include, we must ensure that our digital visuals provide a bridge, not a barrier, to everyone.
03. Roadblocks to Success
Alex is a sophomore engineering student who is blind. Alex uses a screen reader to navigate coursework.
During a high-stakes lesson on thermodynamics, the professor includes an energy profile graph with no alt-text. Alex’s software reads “Image_123.jpg.” Alex has no way of knowing if the reaction is exothermic or endothermic. The learning path stops here.
Missing alt-text is a fragmented narrative. When we fail to provide access at the point of need, the lesson breaks down for the student in real-time.
Missing Alt-Text
Without descriptions, complex diagrams are locked doors for assistive technology users.
Silent Lectures
Missing captions exclude students with hearing loss or non-native speakers.
Formula Gaps
Equations must be descriptive; raw LaTeX is often misread by screen readers.
04. Foundations
The Invisible Bridge
Alternative Text (Alt-Text) is the invisible bridge that transforms an image into descriptive information for students using assistive technology.
How it Works
- 1
The Scan: Screen readers scan the underlying code of a webpage.
- 2
Translation: The software looks for the
altattribute. - 3
The Voice: It reads the description aloud, letting the student “hear” the lesson.
Why it Matters
Providing alt-text is the primary way we meet WCAG Standard 1.1.1. High-quality descriptions ensure the actual point of the lesson is delivered exactly when it’s needed.
05. The 4 Rules
STEM Descriptive Standards
Application
In biology: “Diagram of a mitochondrion highlighting the inner folding where energy production occurs.”
Application
“Line graph of temperature trends. Data points and specific yearly increases are explained in the text above.”
Application
“Scatterplot showing a strong positive correlation between sunlight and plant height.”
Application
For $E=mc^2$, use: “Energy equals mass times the speed of light squared.”
06. Case Studies
Real-World Examples
Source: Wikimedia Commons
Chemistry: Energy Profile
alt=”Graph of chemical reaction energy.”
Tap to flip for standard
Inclusive Standard
Focus on the Exothermic nature (the point of the lesson).
alt=”Line graph of an exothermic reaction showing the potential energy of reactants dropping to a lower energy level in products. A high peak in the middle represents the activation energy required.”
Source: Wikimedia / Kelvinsong
Biology: Mitochondria
alt=”Diagram of animal mitochondrion.”
Tap to flip for standard
Inclusive Standard
Focus on the Cristae (the functional folding).
alt=”Cross-section diagram of a mitochondrion. Highlighting the inner membrane’s extensive folding, called cristae, which increases surface area for chemical reactions.”
07. Practice Lab
Mastering Alt-Text Logic
Try describing this complex science visual, then we’ll break down how to write it effectively.
Astronomy: H-R Diagram
Lesson Focus: The relationship between star temperature and luminosity.
Source: ESO / Wikimedia Commons
Step 1: Your Attempt
How to write this effectively:
Identify the Core Lesson
Focus on the diagonal “main sequence” trend.
Define the Burden of Instruction
Explain that hotter stars (left) are brighter (top).
Remove Redundancy
Start directly. No “Image of.”
Mention Outliers
Briefly note the Giants and Dwarfs.
Expert Suggestion:
“A Hertzsprung-Russell Diagram plotting luminosity against temperature. Most stars lie along the diagonal main sequence, showing that hotter stars are more luminous. Red giants appear at the top right, while white dwarfs are in the bottom left.”
Pause and Reflect
Think back to Alex. How would a high-quality description of that pressure gradient diagram have changed his results in that course?
Accessibility is about removing roadblocks so every learner has the same opportunity for success at the point of need.
08. Wrap Up
Inclusive Resources
ASU Accessibility
The central hub for digital accessibility standards at ASU.
ASU TeachOnline
Guides for creating inclusive STEM course materials.
W3C WCAG
The international Web Content Accessibility Guidelines (WCAG) foundation.
DIAGRAM Center
Expert guidelines and tools specifically for making complex STEM images accessible.