Complex Images: When Is Alt Text Not Enough?

Complex images carry information through data, relationships, sequence, labels, or visual organization. Charts, graphs, diagrams, maps, infographics, and some screenshots are common examples.

A short alt description can identify the image, but it may not give someone enough information to learn from it. The image also needs an equivalent explanation—often called a long description or complex image description.

The question that matters

Without seeing the image, could someone reach the same conclusion, understand the same relationships, or complete the same task?

A Practical Workflow

Name the teaching purpose.
What should a learner understand, compare, notice, or do after examining the image?
Choose where the full explanation will live.
Use nearby visible text, a data table, a caption or expander, or an immediately adjacent link to a separate description.
Write in layers.
1. Identify the image type and topic.
2. State the main takeaway first.
3. Add the essential data, relationships, sequence, labels, or details.
4. Describe visual appearance only when it contributes to the meaning.
Connect the image to the explanation.
Canvas's Rich Content Editor Accessibility Checker recommends fewer than 120 characters for alt text. Use that short text to identify the image and say where the full description appears. For example: Bar chart of GenAI perceptions; data table and key findings follow.
Check for equivalence.
Temporarily ignore the image. Can a learner still get the lesson, evidence, or instructions?

Complex does not mean “long”

An image is complex when its important meaning cannot be communicated adequately through short alt text alone. The instructional purpose—not a word count—determines what the learner needs.

See the Difference

Both examples use the same image. The difference is whether the instructional information is available in text.

Short alt text alone: not enough

Maslow's hierarchy of needs pyramid.

alt="Maslow's hierarchy of needs pyramid"

This identifies the image but leaves out the five levels, their order, and the examples within each level. A learner who cannot see the pyramid would miss essential course content.

Equivalent text on the page: works

Maslow's hierarchy is often shown as a five-level pyramid. It places foundational needs at the bottom and higher-level needs toward the top:

Physiological needs: breathing, food, water, shelter, clothing, and sleep.
Safety and security: health, employment, property, family, and social stability.
Love and belonging: friendship, family, intimacy, and a sense of connection.
Self-esteem: confidence, achievement, respect from others, and being valued as an individual.
Self-actualization: morality, creativity, spontaneity, acceptance, purpose, meaning, and inner potential.

Because the page already provides the equivalent information, this repeated image can be marked decorative to prevent duplication.

Quick Check

Which image most clearly needs information beyond short alt text?

A graph showing enrollment trends by department over 10 years.: Correct: The departments, values, changes over time, and important comparisons need an equivalent text presentation.
A decorative photo of a campus building used as a banner.: If the photo adds no information, mark it decorative.
A screenshot of the Canvas toolbar with the image button highlighted.: If the only needed information is the button's location, short alt text such as “Canvas toolbar with Image button highlighted” may be enough.

Choose the Simplest Method That Works

Each method below can be accessible. Choose the one that keeps the explanation easy to find, navigate, and use.

1. Put the Meaning in the Surrounding Text

Use this when: the image reinforces ideas that the page already explains.

In this example, the surrounding text provides the lesson. The collage is marked decorative so a screen reader does not repeat or interrupt it.

The Power of Mindset and Activism

A positive mindset shapes how people approach challenges and can help them persist through adversity. That belief can also support collective action. Youth activists, for example, have organized marches, campaigns, and public conversations to demand action on climate change and other urgent issues.

Education as a Catalyst for Change

Education can transform individuals and communities by providing knowledge, skills, and opportunities to address social problems. Nelson Mandela's statement that education is a powerful tool for changing the world reinforces this idea.

School Spirit and Community

School spirit can create belonging and shared purpose. Through events, activities, and common values, people build connections to one another and to the institution.

2. Follow the Image with a Data Table and Key Findings

Use this when: exact values and comparisons matter.

Bar chart of student and faculty beliefs about GenAI's impact on learning; data table and findings follow.

The chart compares students' and faculty members' beliefs about the effects of generative AI writing tools in Spring and Fall 2023.

Perceived impact of generative AI writing tools on student learning
Group	Semester	Sample size	Positive	Neutral	Negative
Students	Spring 2023	1,080	49%	30%	22%
Students	Fall 2023	1,290	47%	27%	26%
Faculty	Spring 2023	947	21%	29%	50%
Faculty	Fall 2023	749	22%	39%	39%

Key findings

Students reported a more positive perceived impact than faculty in both semesters.
Student responses changed only slightly between semesters.
Faculty perceptions shifted: negative responses decreased from 50% to 39%, while neutral responses increased from 29% to 39%.

Notes from the chart: The percentages represent beliefs and perceptions rather than measured learning outcomes. “Negative impact” includes concerns about potential effects on learning. Some totals differ from 100% because of rounding.

3. Use a Visible DesignPLUS Caption

Use this when: the description can remain visible with the image without overwhelming the surrounding lesson.

Feelings Wheel; detailed caption follows. — The Feelings Wheel is a circular chart for identifying and articulating emotions. It has three concentric layers:

**Inner circle:** six broad emotions—Angry, Sad, Happy, Surprised, Bad, and Fearful.

**Middle layer:** each broad emotion branches into more specific feelings. Angry, for example, branches into Let Down, Humiliated, Bitter, Mad, Aggressive, Frustrated, Distant, and Critical.

**Outer layer:** each middle-layer feeling branches again into more precise vocabulary. Mad, for example, branches into Violated, Furious, and Jealous.

Optional screen-reader demonstration

This audio clip demonstrates how the Feelings Wheel and its visible description are read. It does not introduce new course content.

Text equivalent: The image description immediately above contains the information read in this optional demonstration. Interface announcements may vary by screen reader and settings.

Why the wheel is useful

Emotional vocabulary: It moves from broad emotions to more precise terms.
Self-awareness: It helps people pause and identify what they are feeling.
Communication and conflict resolution: Precise language can make needs and perspectives easier to understand.
Education, therapy, and everyday reflection: It can support social-emotional learning, counseling, journaling, and difficult conversations.

4. Use a DesignPLUS Expander

Use this when: the full description is lengthy and would interrupt the main reading flow. The expander must be keyboard accessible and clearly labeled.

Main takeaway: The solar nebula was approximately 98% hydrogen and helium. Metals, rocks, and hydrogen compounds together made up about 2% of its mass.

Materials in the solar nebula; full description follows in the expander.

Full Description: Materials in the Solar Nebula

The image is organized as a table with four material categories:

Metals
- Examples: iron, nickel, and aluminum.
- Typical condensation temperature: 1,000–1,600 Kelvin.
- Relative abundance by mass: 0.2%.
Rocks
- Example: silicates.
- Typical condensation temperature: 500–1,300 Kelvin.
- Relative abundance by mass: 0.4%.
Hydrogen compounds
- Examples: water (H₂O), methane (CH₄), and ammonia (NH₃).
- Typical condensation temperature: below 150 Kelvin.
- Relative abundance by mass: 1.4%.
Light gases
- Examples: hydrogen and helium.
- These gases do not condense in the nebula.
- Relative abundance by mass: 98%.

The image uses progressively larger black squares to compare relative abundance. The light-gases square is dramatically larger than the symbols for the other three categories.

Optional screen-reader demonstration

This audio clip demonstrates how the Solar Nebula example and its expander are read. It does not introduce new course content.

Text equivalent: The full description in the expander above contains the information read in this optional demonstration. Interface announcements may vary by screen reader and settings.

5. Link to a Separate Description Page

Use this when: the description is substantial enough to deserve its own page. Place the description link immediately before or after the image.

Color blindness comparison chart; full description is available in the following link. — Read the full description of the color-vision comparison chart.

A separate page should provide the complete equivalent information and an easy way to return to the original content.

Apply the Same Idea Across Formats

Open only the format you use. The controls change, but the goal—equivalent information in a usable reading order—does not.

Canvas or a Web Page

Use nearby visible text as the simplest default.
Use a properly headed table when exact chart data matters.
Use a caption, accessible expander, or adjacent link when the description is lengthy.
Keep the identifying alt text below 120 characters to follow the Rich Content Editor Accessibility Checker's recommendation.
If nearby text already communicates everything the image contributes, mark the image decorative to avoid repetition.

Word or Google Docs

Use the image's Alt Text field for a short identification or key takeaway.
Put the full description in the document near the image, using headings, lists, or a real data table when structure matters.
Do not paste a screenshot of a data table when you can create an actual accessible table.
Run the document's accessibility checker and confirm that the image and description occur in a logical reading order.

PowerPoint or Google Slides

Put the key takeaway in visible slide text whenever possible.
Use alt text to identify the chart, diagram, or other visual and communicate its purpose.
If the full explanation will not fit without making the slide unusable, provide an accessible companion document or text alternative.
If the slide deck is shared, the deck itself must be accessible. If only a video is shared, describe essential visuals in the narration and provide accurate captions.

PDF

Correct the source document first, then export a new tagged PDF whenever possible.
Verify that the image, its short identification, and its full description appear in the correct reading order.
Check the tags, table structure, and actual reading experience—not only the automated checker result.

Optional Video Walkthrough

This 4-minute, 10-second video reviews long descriptions and text-only alternatives for charts, infographics, and other complex images.

Use Subtitles/CC to turn on captions.
Use Settings to adjust playback speed.
If the video does not load, watch Alt Text for Complex Images on YouTube (opens in a new tab).

Use AI as a Drafting Partner—Not the Final Reviewer

Generative AI can help create a first draft, especially for charts, diagrams, and dense graphics. It does not know your learning objective and may invent, omit, or misread details.

Tell the tool the image's purpose, audience, and the point learners need to understand.
Ask for the key takeaway first, followed by essential data, relationships, and structure.
Compare every statement, label, number, and relationship against the original image.
Edit the draft for your course context and reading level.

Privacy: Do not upload student information, confidential records, unpublished research, or other sensitive material to an AI tool. Follow your college or district's approved-use policy.

If your institution permits generative AI for this material, you may use the Accessibility Editor GPT (opens in a new tab) or another approved tool. Treat every generated description as an unverified draft; the person publishing the image remains responsible for its accuracy and instructional equivalence.

Sample prompt

Draft an accessible description of this [chart, map, diagram, or infographic] for community college faculty. Start with the main takeaway, then provide the essential data, relationships, sequence, and labels. Do not infer missing information. Flag anything you cannot read confidently.

Fix a UDOIT Finding

UDOIT may identify symptoms of a complex-image problem even though it cannot decide whether the full explanation is instructionally equivalent. These guides provide current repair steps:

After the technical issue is repaired, return to the question that matters: can someone reach the same conclusion or complete the same task without seeing the image?

Before You Publish

The short alt text identifies the image and points to the full description.
The full description begins with the image's purpose or key takeaway.
Important values, labels, relationships, and sequences are available in text.
Structured information uses real headings, lists, or headed tables.
The description is easy to find and occurs in a logical reading order.
Color, shape, or position is described when it carries meaning.
A learner can get the same instructional value without seeing the image.

If you need help implementing a DesignPLUS caption or expander, contact your instructional design technology specialist or distance education coordinator.

For additional examples, see the W3C Web Accessibility Initiative tutorial on complex images (opens in a new tab).