Complex Images in Canvas
Complex images used in education may include, but aren't limited to, charts, graphs, diagrams, infographics, blueprints, design plans, and maps. Because they present detailed information, short alt text alone isn't enough. A detailed text description is needed to explain patterns, relationships, or data so students using screen readers gain the same conceptual understanding as their peers. This guide explains the custom Figure feature available in the Canvas RCE when uploading a new image.
Figure Considerations
- Complex images must be high quality to display 100% and zoom in up to 200% without getting blurry.
- Figures are not decorative images.
- Short alternative text is required.
- Further details are explained fully in the long description.
- Text in long descriptions requires formatting with headings, paragraphs, lists, and descriptive hyperlinks as needed.
- Long descriptions must communicate the educational purpose, not just appearance.
- Avoid redundancy by not repeating information already in surrounding text.
- Ensure that color, shapes, or patterns in the figure are also described in text.
- If the figure is a chart or graph, provide data values or summaries in text.
- HTML for images can be challenging, so OTLT developed a custom figure feature for UIW.
- The custom figures feature is only available in the Upload Image option of the Canvas RCE.
- To modify existing complex images in a course, use the Canvas RCE HTML editor to manually add the <figure> HTML.
- A link to a Canvas Page or a Word document to provide the long description is also an acceptable solution.
Steps to Upload a Figure
Step 1: Design the Layout of Your Canvas Content
Working with HTML through the Canvas RCE can be tricky. The easiest way to manage placing complex images is to create the layout of text in Canvas first. Type your headings, subheadings, paragraphs, and lists before moving on to avoid issues. Images added as figures will display 100% of the page and must have their own line rather than wrapped with text. Plan for paragraphs above and below only. Once your text is laid out in Canvas, place your cursor where you want the complex image to appear.
Step 2: Open the Upload Image Option in the RCE
- Browse your computer to select an image to upload.
- Click any question mark icon for more details.
- Type a short description in the Alt Text field that is 120 characters or less.
- Type a meaningful title in the Figure Title field that indicates where students can click to find the long description.
- Type the explanation in the Long Description field as a single paragraph: If using generative AI to compose long descriptions or pasting the text from another location, paste as plain text for best results.
- Click Submit to save.
- Give the appearance a moment to fully load, then use the RCE options to format the long description text with headings, subheadings, paragraphs, lists, and hyperlinks.
-
Save the content area to view the final results.

Step 3: Reorganize Images in Files
When uploading images through the Canvas RCE, the image files are automatically placed in Files within a folder titled Uploaded Media. You can open Files and use the Move feature to reorganize your figures as needed.
Modifying Existing Complex Images
Since the Figure feature is only available when uploading new images, you may want to adjust the HTML of existing images using either the basic or a formatted version of figure HTML.
Figure HTML - No Formatting
<figure>
<img style="width: 100%;" src="ensure the existing URL stays here or the image link will break" alt="[Alt text that is 120 characters or less goes here]" />
<figcaption>
<details>
<summary>[Figure title goes here]</summary>
<p>[The complete long description goes here]</p>
</details>
</figcaption>
</figure>

Figure HTML - Formatted
<figure style="margin: 1.25rem 0; display: inline-block; width: auto;">
<img style="width: 100%; border: 1px solid #000000; display: block;"
src="ensure the existing URL stays here or the image link will break" alt="[Alt text that is 120 characters or less goes here]" />
<figcaption style="margin-top: 0.75rem; width: 100%;">
<details style="border: 1px solid #d6dde0; border-radius: 0 0 8px 8px; padding: 16px; background: #fafbfc; font-family: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
<summary>[Figure title goes here]</summary>
<div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e8edf0; color: #2d3b45; line-height: 1.5; font-size: 12pt; max-width: 100%; overflow-x: hidden;">
<p>[The complete long description goes here]</p>
</div>
</details>
</figcaption>
</figure>

Complex Images in Canvas FAQ
What makes an image “complex” under WCAG?A complex image is one that conveys detailed information beyond what can be described in short alt text. Examples include charts, graphs, maps, infographics, architectural blueprints, and scientific diagrams.
Why isn’t short alt text enough for these images?Short alt text is limited to a concise description. Complex images often contain data, labels, or relationships that require additional explanation so screen reader users can understand the full meaning.
How do I decide between decorative, alt text only, or long description?Decorative: purely for visual appeal, no learning value. Alt text only: the image supports surrounding text but doesn’t add new information. Long description: the image presents unique details students need to learn.
Why can't I find the Figure feature in the Image Options?As custom solutions are limited to certain areas of Canvas, the figure feature is only available when uploading new images through the RCE Image Upload option. It is not available in Files or when editing existing images.
Do long descriptions need formatting?Yes. Use paragraphs, headings, lists, or descriptive hyperlinks as needed to make the explanation clear and easy to navigate.
Will Ally or the Canvas Accessibility Checker flag issues with my long descriptions?No. Automated tools check for the presence of alt text, but only a human can ensure that a long description is added and accurately conveys the educational purpose of a complex image.
What if I don't want to use the Figure feature or edit HTML?Write the long description of your image on a Canvas page or in a Word document, then provide a link to the location with the image.