ASU

Microlearning Training

MICROLEARNING TRAINING

Demystifying
STEM Alt-Text

Ensuring Science, Tech, and Math visuals are descriptive, accurate, and accessible.

Disclaimer: Web images and AI functionality may be broken or unavailable due to hosting restrictions.

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

Digital Barriers

While our inclusive mission is clear, everyday course materials often contain unintentional barriers. Let's look at how a seemingly minor oversight impacts a real student.

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 creates a fragmented narrative. When we fail to provide access at the point of need, the lesson breaks down for the student in real-time.

A

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 Universal Bridge

Alternative Text (Alt-Text) is the invisible bridge that transforms an image into descriptive data. While essential for compliance and screen readers, Universal Design for Learning (UDL) reveals that robust alt-text builds a stronger, more resilient learning experience for everyone.

Assistive Tech

Translates visual data into spoken words for students with visual impairments, directly addressing core WCAG compliance.

Low-Bandwidth Resilience

For students commuting, on restrictive data plans, or dealing with rural internet, alt-text displays seamlessly when images fail to load.

Search & Discovery

Pixels aren't searchable. Alt-text allows students to use "Ctrl+F" to locate concepts, and helps search engines index course materials.

Cognitive Reinforcement

Many learners process text better than visuals. A clear, well-written description reinforces the graphic, helping all students grasp complex concepts.

05. Anatomy of Alt-Text

Breaking It Down

Staring at a blank alt-text box can be intimidating—especially for complex STEM graphics. Where do you even start? To remove the guesswork, we rely on a simple, repeatable framework. Think of every effective description as having three core anatomical parts:

+1.5°C 0.0°C -1.5°C Global Temp 1920 1970 2020 Year

Context: A lesson on recent climate trends.

alt="Line graph showing global temperature rising sharply over the last century."

1. The Format

What kind of image is it? (e.g., Line graph, diagram, photograph).

"Line graph"

2. The Subject

What is the visual explicitly about?

"showing global temperature"

3. The Takeaway (Instructional Value)

What is the student supposed to learn from seeing this?

"rising sharply over the last century"

06. The 4 Rules

STEM Descriptive Standards

Knowing the basic anatomy is just the starting point. To ensure our STEM visuals are instructionally sound and accessible, we apply these four core rules.

Alt-text is not a one-size-fits-all description; it changes based on the lesson's current objective. If an image of a cell is used in a lesson about the nucleus, describe the nucleus. If the same image is used to teach cell walls, describe the cell wall.
The "Why": Students using screen readers cannot "glance" past irrelevant details. Over-describing visual clutter creates cognitive overload. Pinpointing the exact instructional context saves time and energy.
Application

In biology: "Diagram of a mitochondrion highlighting the inner folding where energy production occurs."

Never start with "Image of" or "Picture of"—assistive technology already announces the element as an image. Furthermore, if the surrounding paragraph already fully explains the visual data, your alt-text should be brief and point back to the text.
The "Why": Screen readers read linearly. Forcing a student to listen to "Graphic of..." on every single visual is tedious. Repeating a paragraph of text they just read is even worse.
Application

"Line graph of temperature trends. Data points and specific yearly increases are explained in the text above."

If a complex chart, graph, or diagram introduces new information that isn't explicitly covered in the surrounding body text, the alt-text must shoulder the burden of teaching that concept completely.
The "Why": Sighted students can extract pedagogical value directly from the image. If the image is removed, does the lesson still make sense? If not, the alt-text must bridge that instructional gap.
Application

"Scatterplot showing a strong positive correlation between sunlight and plant height."

Avoid raw LaTeX, MathML code, or symbol-heavy strings in your alt-text. Instead, write out mathematical expressions, formulas, and symbols exactly as a professor would dictate them out loud to a lecture hall.
The "Why": Screen readers interpret punctuation and symbols unpredictably. A hyphen might be read as a minus sign, or skipped entirely. Using plain language ensures the mathematical concept is unambiguous.
Application

For $E=mc^2$, use: "Energy equals mass times the speed of light squared."

07. Case Studies

Real-World Examples

Let's see the 4 Rules and the Anatomy framework applied to actual course graphics.

Exothermic Reaction Graph 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."

Mitochondria Diagram 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."

08. Practice Lab

Mastering Alt-Text Logic

It's your turn. Apply the 3-part anatomy and the 4 rules to describe this complex science visual, then compare your attempt with our expert breakdown.

Astronomy: H-R Diagram

Lesson Focus: The relationship between star temperature and luminosity.

Hertzsprung-Russell Diagram Source: ESO / Wikimedia Commons

Step 1: Your Attempt

09. Wrap Up

Continue the Journey

Accessibility is not a one-time checklist; it's an ongoing commitment to inclusive design. As you build and refine your course materials, use these resources to deepen your understanding and ensure your digital classroom remains open to every learner.

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.