A Universal Design Approach to Accessible Figures

This post was contributed by Amy Hofer and Veronica Vold. It excerpts content from the Open Curriculum Development Model, licensed under CC BY 4.0.

This post shows how authors can practice universal design moves at the same time as they make their media more accessible to all students.

To see how these concepts are applied to a three-year curriculum development project, visit Effective Multimedia Figures [Website].

Additional posts on a universal design approach to accessibility:

• A Universal Design Approach to Links [Website]
• A Universal Design Approach to Figure Captions [Website]

Considerations for Images

Figure captions, alt text, and image descriptions work together to ensure that all readers can access the essential, aligned information provided by the images you choose to include. Here’s how these different elements serve distinct purposes:

• As explained in A Universal Design Approach to Figure Captions [Website], figure captions often pose a question, draw a contrast, or explain a concept. The caption is readable to all textbook users, with or without screen reader software.
• Alt text, or alternative text, is the short text substitute for visual information conveyed by an image, chart, or graph. Typically, alt text is only read by users who use screen reader software. It isn’t visible on the page unless the image fails to load. Alt text is not necessarily a literal description of the image. Instead, alt text briefly captures visual information that relates to the purpose of the image.
• Image descriptions accompany alt text when more than 10-15 words is necessary to communicate the relevant visual information. This is often the case for infographics, charts, or other complex images. Image descriptions aren’t only for people who use screen reader software, but also for anyone who benefits from detailed summaries of visual information. Image descriptions can be accessed by all users. Image descriptions are presented as optional/additional content, for example in an expandable accordion box, or as a link that brings users to a page footer or the back matter of your book.

Example 1: No Alt Text Needed

Sometimes the figure caption will convey all the relevant details about the visual information in the image. If this is the case, then adding alt text is redundant. Adding alt text is only necessary when the visual information conveyed by an image is not otherwise available to users who use screen reader software. Figure 1 is an example of when alt text is not necessary because the figure caption is quite detailed.

Note that in the examples that follow, we put alt text and image descriptions in the body of the text because we’re discussing how to write them.

Example 2: Figure with Alt Text

Most of the time, however, the figure caption won’t summarize the visual information conveyed by an image in detail and alt text will be necessary. Figure 2 is an example of a figure that has both a caption for all readers and alt text for screen reader users:

In the above figure caption, the visual information of the image is not described in the caption itself; the image supplements the text. In order to convey the visual information, the alt text reads: “An unzipped glucometer kit and accessories.”

Have you ever tried to access an image with a screen reader yourself? This is an everyday activity for screen reader users, but might be new to sighted people. To understand why alt text is so essential, check out a screen reader user demonstrating what happens when an image is missing alt text in the 30-second video Screen Reader: Image without Alt Text [Streaming Video].

Sometimes alt text will include information that is relevant to all users but only appears in alt text. In these cases, move the information to the figure caption instead so that it is available to the broadest audience. For example, let’s say that the alt text for the above image listed each accessory, but the list wasn’t available in the surrounding text or figure caption. The list of accessories would need to be included in the surrounding text or figure caption.

Example 3: Photo with Alt Text and Long Description

Figure 3 is an example of a complex image that has a caption for all readers, a “glance” in a 10-word alt text for screen reader users, and an image description linked in the caption where any reader can decide to access more information. This example is drawn from a chapter that examines the meaning of disability. In Inequality and Interdependence: Social Problems and Social Justice [Website], Kimberly Puttman writes:

Traditional views of disability follow a medical model, primarily explaining diagnosis and treatment models from a pathological perspective (Goodley and Lawthorn 2010). In this traditional approach, individuals diagnosed with a disability are often discussed as objects of study instead of complex individuals impacted by their environment.

The image illustrates the complexity of individuals, noting that disability conditions may be visible or hidden, temporary or permanent, and are experienced by people of every age and social group.

The alt text for figure 3 is a short phrase that summarizes the visual information in the image. It reads: “A group of people of color with a range of disabilities pose together.” In this example, the author wants to include identity-specific information about the individuals pictured to emphasize that disability is shared across a number of social identities. The author includes an image description linked in the caption so that these social identities can be discussed in detail. The image description for figure 3 is copied from the website that published the image, Disabled and Here [Website]:

Six disabled people of color smile and pose in front of a concrete wall. Five people stand in the back, with the Black woman in the center holding up a chalkboard sign reading ‘disabled and here.’ A South Asian person in a wheelchair sits in front.

This level of detail may or may not be appropriate for every chapter or for every image. The level of detail depends on the author’s purpose for including each image. Since the disability status and race of the people in the image is relevant to the author’s argument, the image description gives this information to all users.

Example 4: Infographic with Alt Text and Long Description

Figure 4 is another example of a complex image that conveys more information than alt text can represent in 10 words. The figure shows the relationships between social identities as distinct and yet connected. This image requires both alt text and an image description.

The alt text for figure 4 is short, summarizing the visual information with a sentence. It reads: “A vibrant flower with different social identities on each petal and a center labeled ‘Intersecting social identities.’”

The image description linked in the figure caption provides additional necessary detail, including the identities indicated by each petal:

A vibrant, rainbow-toned flower with different social identities marked on each petal, including: Neurodiversity, Body Size, Ability, Gender, Sexuality, Sex, Race, Ethnicity, Age, Socioeconomic Status, Nationality, Culture, Religion, Geography, First Language, and Health. Each petal intersects at the flower’s center, which is labeled “Intersecting social identities.” Creators Elizabeth Pearce and Michaela Willi Hooper are noted along with the CC BY Creative Commons license.

This additional detail indicating color tone and emphasis helps to ensure that all parts of the image are accessible to users. It also notes the spatial relationship between the center and the petals of the flower. Further, the image description includes attribution information as it is embedded in the image itself. As sighted users see this information associated with the image, it is appropriate for the image description to convey this information as well.

How to write alt text

Alt text complements the figure caption by describing relevant visual information that the figure caption doesn’t name. By writing alt text, you will ensure that all users can access visual information from an image. Users who are blind or have low vision use screen reader software to read alt text. If an image won’t load due to issues with a device or limited internet connectivity, alt text will show instead.

Can someone else write your alt text for you? The answer is, as usual, that it depends.

Sometimes images come with alt text. It could be alt text that was generated by AI, was already associated with the image metadata, or was written by a collaborator. In some cases, this alt text will suit your purpose. However, authors must check all alt text to make sure that it conveys the relevant information in the context of your chapter. Without a clear purpose, alt text will be quite random. The author is the person best situated to determine the purpose for an image and the best alt text.

Follow these guidelines to pair your figure captions with useful alt text:

• Keep it concise and focused (usually 10-15 words or less). If you have a lot to say, include more information in an image description or in the figure caption.
• Avoid the phrase “picture of” or “image of.” Screen reader software will say “graphic” or “image” when reading alt text. If the medium of the image is relevant to its purpose, for example, a painting or a handwritten letter, include this information.
• When describing people, do not assign people social identities. Use terms like “dark skin tone” or “light skin tone” and note hairstyle, clothing, and physical build. Alt text should respectfully describe human diversity in images.
• Alt text describes the relevant visual information that is not named in the figure caption. If the figure caption fully explains all relevant visual information, the alt text can read “See figure caption for details.”
• Consider the context for the image. The same image will have different alt text in different contexts. For example, the alt text for an image of a child riding a bus for a chapter on gender might focus on the gender presentation and clothing of the people on the bus. The alt text for that same image in a math textbook might note the skin tones of people on the bus but focus on the bus schedule.
• If the image includes a few relevant words or numbers, write them out in the alt text, unless they are already included in the figure caption.
• If the image is complex, use the alt text to summarize key information so that non-sighted users can decide if they want to open the image description.
• Different authoring platforms use different fields for adding alt text. When adding alt text in Google Docs, use the “description” field.

How to write image descriptions

While alt text is a short phrase – the text equivalent of glancing at a figure – image descriptions include rich visual detail and context. As accessibility advocate Veronica Lewis notes in the post How To Write Alt Text and Image Descriptions for the Visually Impaired [Website], “Alt text tells someone that there’s a puddle on the floor, and image description tells someone that the puddle on the floor is in the middle of the floor and it’s orange juice.”

If you need more than 125 characters, or 10-15 words, to describe your image, you need an image description. Follow these three steps:

1. Summarize the purpose of the image in alt text.
2. Write your image description using the guidelines below
3. Indicate that the image description is available so that all readers can decide if they want to open the image description by placing an expandable accordion immediately following the image, or by adding “Image description available” after the last sentence of your caption.

Image descriptions help all users understand language, relationships, and actions they otherwise might miss. To write image descriptions, use the following guidelines:

• The goal of an image description is to provide more context and detail than the alt text alone. It should not repeat the alt text but add something new.
• When describing people in image descriptions, include emotions when relevant. If facial expressions and body language communicate emotions (anger, joy, fear) that are relevant to the purpose of using the image, describe them.
• Just as when writing alt text, unless someone’s race or gender is self-described, do not assign people social identities. You can use terms like “dark skin tone” or “light skin tone” and note hairstyle, clothing, and physical build.
• If the image includes words or numbers, write them out. If an image is an infographic or chart, data may be restated in a table.
• Don’t forget to note details about the setting of an image when relevant to its purpose. You might choose to describe the visual perspective of the image (close-up, bird’s eye view, high-angle, low-angle), the weather conditions, the lighting, different figures or creatures, or visual textures.

One way to handle image descriptions is with an expandable accordion. We recommend using stylistic cues to separate the expandable content so that when it is expanded, it is clear where the image description ends and the main body of the text begins again.

Here’s an example of what the html code looks like for the expandable accordion method in a Pressbook with the image description inside a plain text box to separate it from the body of the text.

<div class="textbox">

<details>

<summary>Figure 4.1 Image Description</summary>

Learning Identity Framework for Interpreting: On the left is a bubble labeled “Identity Sources” with an image of a woman, Australia, and a group of people; on the right is a bubble labeled “Identity Resources” with an image of a lightbulb, cilpboard, and a person’s hands signing. At the center is the woman and two others with the text “Storying and Interacting”

</details>

</div>

Another way to handle image descriptions is with anchored links. Add “Image description available” after the last sentence of your caption; write your image description in a place that you can link to from the figure caption – for example, a page footer or your book’s back matter; and include a return link so that readers can come back to the image and continue reading.

Here’s an example of what the html code looks like for the anchored links method.

• For an image with an anchor and a caption that links to an image description:
  • <img id=”description-return” src=”https://openoregon.org/wp-content/uploads/2025/12/image17-e1764629224635-973×1024.jpg” alt=”Chart illustrating higher food insecurity among women” />Figure 2. We provide two captions for this image. What caption would you choose? <a href=”#description”>Image description available.</a>
• For the image description and the return link to the image anchor:
  • <h2 id=”description”>Description for Figure 2</h2>
    [paste image description here] <a href=”#description-return”>Return to Figure</a>

Considerations for multimedia

Audio captions, transcripts, and audio descriptions work together to ensure that all readers can access the essential, aligned information provided by the multimedia you choose to include. Here’s how these different elements serve distinct purposes:

• Audio captions provide a running transcription of audio content that is synched up to an audio or video file. Audio captions appear within the media player.
• Audio descriptions provide a spoken description of content that would otherwise be conveyed only visually. People who can’t see the video can access visual information this way. (Example: you’re playing a cooking video while preparing a meal. During a pause in the dialog, a new voice narrates, “Amy and Veronica pour the ingredients into the bowl and stir.”)
• Transcripts provide the full transcription of audio content–both audio captions and audio descriptions–in a text file. Transcripts are keyword searchable and offer an alternative to watching or listening to a video. Transcripts are also useful for students who can read more efficiently than they process auditory information. Finally, transcripts are important for students who want to accurately cite or quote something they learned from engaging with the multimedia.

Audio captions, transcripts, and audio descriptions that come with multimedia are often machine-generated. Content creators and platforms take this option on the theory that providing something is better than nothing. However, according to The Problem with Using Auto Captions in Higher Education [Website], machine-generated audio captions, transcripts, and audio descriptions are often only 80 percent accurate. Names, technical terms, or words spoken too quickly or in accented speech may not come through in the caption text.

If these files aren’t reviewed and edited by a human, students who are Deaf or hard of hearing won’t be able to access this content. English language learners will miss key information. Students who are studying with sound off won’t be able to accurately follow along. Accurate audio captions, transcripts, and audio descriptions ensure that all students have an equitable opportunity to engage with content.

Audio descriptions may be the least familiar accessibility requirement for authors and instructors, as this technology is not yet integrated into most video production platforms. One solution to providing audio descriptions is to narrate relevant action or movement when creating a script for a video. Authors and instructors can review their video delivery in advance of recording and describe key visual information in spoken words so that it becomes part of the caption file for the video.

To evaluate the audio captions, transcripts, and audio descriptions in media you want to use in your textbook, watch two full minutes of the selected media with the captions turned on. Here’s what to look for:

1. Are audio captions appearing within the video frame?
2. Can you find a transcript on the site where the video is shared?
3. Are audio descriptions offered to describe relevant visual content?

If you do find these elements, pay attention to the accuracy of spelling, phrasing, and punctuation while you watch. If you see more than one error, it’s safe to conclude that these captions have not been edited by a human.

Considerations for Inaccessible Third-Party Multimedia

What if you want to use multimedia that isn’t fully accessible?

If you created the content yourself then you can remediate it, but if the content is external then your options are limited. You may save time by finding an alternative that meets accessibility standards.

For inaccessible content that is unique or has a specific pedagogical value, here are a few options to try:

• Look for contact information for the creator or owner of the content and ask them to remediate it.
• Determine whether you have permission to make an accessible version, either because the content is openly licensed or if you’ve made a fair use determination.
• Pull out the important content as a quote or summary, and cite the video in your reference list.

Conclusion: A Note About Timing

Rather than treating accessibility as a last step or a final check, seek to integrate accessibility directly into chapter drafting itself. Draft alt text and image descriptions at the time you paste an image into your drafting document. This process clarifies each figure’s purpose not only for an audience, but for authors themselves. Check for accurate media captions and transcripts before pasting media links into the chapter. By making accessibility part of the cycle of drafting, rather than an afterthought at the end, authors can effectively align media elements with their learning objectives.

Funding

Our grants drew from Governor’s Emergency Education Relief funding and the Fund for the Improvement of Postsecondary Education (FIPSE) in the U.S. Department of Education (eighty percent of the total cost of the program is funded by FIPSE, with the remaining twenty percent representing in-kind personnel costs funded by Open Oregon Educational Resources).

The contents of this post were developed under a grant from the Fund for the Improvement of Postsecondary Education, (FIPSE), U.S. Department of Education. However, those contents do not necessarily represent the policy of the Department of Education, and you should not assume endorsement by the Federal Government.

Licenses and Attributions

This post is adapted from “Module 3: Working Toward Accessibility: Expanding Your Universe of Learners by Veronica Vold, licensed under CC BY 4.0.

Sample paragraph about views of disability is from Inequality and Interdependence: Social Problems and Social Justice by Kimberly Puttman, licensed under CC BY NC SA 4.0.

The suggestion of 125 characters for alt text and the sentence regarding names and the limits of autogenerated captions is adapted from 2025 A11y Presentation for Oregon by Abbey K. Elder, licensed under CC-BY 4.0.

Figure 1. Portland Oregon neon signage during nighttime by Zach Speakis licensed under the Unsplash License.

Figure 2.Gestational diabetes kit by Stevenfruitsmaak is licensed CC BY 2.0.

Figure 3. “Disabled and here group shot” by Disabled And Here is licensed CC-BY.

Figure 4. “Intersecting Social Identities” by Michaela Willi Hooper and Elizabeth Pearce for Open Oregon Educational Resources is licensed CC BY.