Making Complex Images and Figures Accessible

Complex images—most commonly figures, diagrams, charts, graphs—play a critical role in conveying information in many courses, but they can present significant barriers to users with disabilities if not made accessible. This resource provides practical guidance for ensuring that complex images are perceivable and understandable by all users, including those who rely on screen readers, keyboard navigation, or other assistive technologies.

In courses with a lot of complex visual content, ensuring accessibility may require making significant changes to your existing work flow. If you would like help with finding strategies that might be easiest for your specific situation, please contact the Instructional Designer assigned to your unit.

Understanding Alt Text and Long Descriptions

Alt Text

Alt text (short for alternative or alternate text) is a brief written description of an image that conveys its purpose and content to someone who can’t see it. Alt text helps screen reader users understand the content and intent of the image. Alt text must be meaningful, concise, and context specific. It should describe why the image is there, not just what it is.

Guide to Writing Effective Alt Text

Long Descriptions

In addition to alt text, complex images also generally require a long description providing a more detailed explanation of everything in the image. Long descriptions are necessary any time it takes more than a couple sentences of alt text to convey the important information contained in the image. As a general rule, this should encompass everything that you would explain about the image when talking about it in class and expect students to know when answering questions related to the image. This ensures full access to complex visuals for users with sight-related disabilities and also provides helpful detail and context for any student reviewing the material outside of class.

Guide to Writing Long Descriptions

Example Alt Text & Long Description

Click on the expander below to view an example of both alt text and long descriptions for a typical diagram used in the Earth & Atmospheric Sciences department. The descriptions were originally created using an Image Description Generator from Arizona State University, but required editing to ensure the full purpose of the image was conveyed.

Example of a Complex Diagram

Diagram showing the impact of air pressure, temperature, height on particle density

Alt Text

Appropriate alt text for this image might be something like "Diagram showing the effect of pressure on particle temperature and density. As pressure increases, so do both temperature and density." Notice that this description doesn't focus as much on the visual elements like colored circles, dots, and arrows, but rather conveys the information that a student would be expected to take away from looking at the diagram. Since the alt text is so short and doesn't fully convey the visual information, it is appropriate to also provide a more detailed text description.

Long Description

Since the alt text listed above is so short and doesn't fully convey the visual information, it is appropriate to also provide a more detailed text description. In this case, we might write something like this:

The diagram illustrates the effect of increasing pressure on temperature and density, represented by three colored circles arranged vertically. The overall goal of the image is to show that as air pressure increases, density and temperature also increase. On the left, a large black arrow points downward, labeled "Increasing pressure" in red text, indicating that the items at the top of the diagram are experiencing low pressure while those at the bottom of the diagram are experiencing high pressure. The top circle is the largest and is colored blue with the word "cooler" written in blue to its right, and it has 8 black dots and two small horizontal black arrows pointing inward indicating low air pressure. The middle circle is slightly smaller, colored with a gradient from blue to pink, labeled "cool" in light blue to the right, and has the same number of black dots with inward-pointing arrows indicating medium air pressure. The bottom circle is the smallest, colored red, and labeled "warm" in red on the right. It also contains the same 8 black dots and larger inward-pointing arrows indicating higher pressure. Red arrows connect the three circles vertically, indicating the sequence from top to bottom as pressure increases.

Additional Considerations for Charts and Graphs

Charts and graphs are powerful tools for visualizing data. but they can present barriers when shared as static images without accessible alternatives. In addition to providing alt text and long descriptions, to make these visuals more accessible, consider both the format and interactivity with the underlying data.

Provide the data in a table format

Whenever possible, include a data table alongside the graph or chart. Accessibly formatted tables offer a straightforward, screen reader-friendly way for users to engage with the same information without relying on visual interpretation. For example, a bar graph showing monthly sales should be accompanied by a table listing the exact sales figures for each month.

Use interactable graphs

Instead of including charts as static images, use tools that allow for interactable graph elements, if feasible. Creating the graph directly in Excel or embedding an Excel chart into a PowerPoint slide are ways to achieve this interactive operability. These formats often retain accessibility features like keyboard navigation, data field access, and text descriptions, which make it easier for users of assistive technologies to engage with the content.

Considerations for Using Color

Color can enhance the clarity and visual appeal of complex images, but it must be used thoughtfully to ensure accessibility. Two key considerations are essential: maintaining sufficient color contrast and avoiding the use of color alone to convey meaning.

Color Contrast

Color contrast refers to the difference in brightness and color between foreground and background elements. High contrast (e.g., black text on a white background) helps users with low vision or color deficiencies distinguish elements clearly and improves readability for everyone, especially users with low vision or color blindness. Insufficient contrast can make content difficult or impossible to perceive for some users.

Using Color for Meaning

Relying on color alone to convey meaning can create barriers for many users. Individuals with color vision deficiencies may not be able to distinguish between certain colors, such as red and green, making key information unclear or invisible. Additionally, screen reader users cannot perceive color at all—so any meaning tied only to color will be lost without supporting text or descriptions. Always pair color with another visual indicator, such as labels, patterns, shapes, or positioning, so that all users can understand the content. This practice ensures that all users, regardless of how they perceive color, can understand the information being presented.

Additional Guidance

It can be challenging to ensure that color contrast meets WCAG guidelines. This resource has more detailed information on how to determine whether your images have sufficient color contrast.

More Information on Color Contrast

Color Contrast Checker