Clearing the Trail: Accessibility
Accessible Images in Pressbooks
Learning Objectives
By the end of this chapter, you will be able to
- Differentiate between alt text, image descriptions, and figure captions
Accessibility Standard – Images
The images in the OER use appropriate alternatives and supporting details for conveying information where necessary.
What Are Images?
Images are non-text elements that include photographs, illustrations, figures, diagrams, pictures, charts, graphs, and maps.
File types used: GIF, JPG, PNG
For Whom Are You Doing This?
This work supports students who:
- Are blind or have low vision
- Have poor contrast vision
- Are color blind and cannot differentiate between certain colors
- Use a device with a monochrome display
- Use a print copy that is in black and white
- Have limited Internet access and cannot download images
- Have a form of cognitive disability
How Does That Work? – Screen Readers and Images
Screen reader software and user preferences vary on reading speed and settings, but alt text is a universal expectation for informative images. Watch this screen reader user demonstrate what happens when an image is missing alt text. As the user points out, what if this was an assignment? What does missing alt text communicate about who belongs and who does not?
Why Is This Important?
Providing alternative information on an image in a text format can help ensure that users will be able to access and use the information in a way that best suits their accessibility needs.
Providing information in various accessible formats helps ensure that all users can easily understand and access the information. Any purposeful (non-decorative) images should also include textual information describing them to non-sighted learners.
What Do You Need To Do?
Accessibility Checklist – Images
- Images that convey information include alternative text descriptions (alt text) of the image’s content or function.
- Graphs, charts, and maps also include contextual or supporting details in the text surrounding the image.
- Images do not rely on color to convey information.
- Images that are purely decorative do not have alt text descriptions.
Determine the Image’s Purpose and Value
Before you can determine what to do to make an image accessible, you must identify its purpose or value to your textbook. Does your image serve a function or is it merely decorative? Once this is determined, the steps for making the image accessible can be taken.
If your image is conveying non-text content to students, it serves a functional purpose.
-
- Examples: a graph of a study that is referenced in the body of the chapter or an image of people exemplifying what is discussed in the chapter
If your image is primarily a design element that does not convey content, it serves a decorative purpose.
-
- Example: design doodles on the page or a placeholder image that, if removed, would not decrease the content relevance.
Now that you’ve determined the purpose of your image, you are ready to take steps to make it accessible.
Functional Images
Consider what your content page would look like if the images didn’t load. Now try writing alternative text for each image that would work as a replacement and provide the same information as the image.
There are three ways to provide alternative text descriptions for images:
Select the arrows to read about the three options:
Describe Images in the Figure Captions
Figure Captions are one to two sentences of textual description that contextualize the image content within the surrounding text. Figure captions often pose a question, draw a contrast, or explain an illustration. The caption is readable to all textbook users with or without screen reader software.
Describing the images in the caption makes the information available for everyone, not just those using the alt text. If you are editing someone else’s work for accessibility, the author will need to craft the captions connect and support what is in the text. If the images are complex, alt text and captions will likely not be enough for someone using a screen reader to understand the image, and an image description will need to be included.
Describe the Image in the Alt Text
View the video for an introduction to and examples of Alt Text:
Introduction to alternative text by Pope Tech
Alt text, or alternative text, is the short text substitute for visual information conveyed by an image, chart, or graph. Alt text can also be called an “alt tag.” Typically, alt text is only read by users who use screen reader software. It isn’t visible on the page, but when a screen reader finds an image, it will read out the content of the alt tag.
Also, when an image does not download due to slow internet, the alt tag content will also display instead of the image. Alt text is not necessarily a literal description of the image. Instead, alt text aims to capture any visual information that relates to the purpose of the image.
Describe the Image in Image Descriptions
Image descriptions include rich detail and are longer than alt text. Image descriptions convey numbers, trends, and patterns that alt text and figure captions usually won’t describe.
Image descriptions are intended for users who need more detail about the visual information of an image. Often these users will include people who may not use screen reader software but who benefit from more orientation to visual information.
Considerations When Using Color
Consider what your images would look like if they were only displayed in black and white. Would any necessary context or content be lost if the color was “turned off?” Images should not rely on color to convey information; if your point requires color, you may need to edit or format the image so the concepts presented are not lost to those who are color blind or require high contrast between colors.
Example 1: Inaccessible Bar Chart
In Chart 1, color is the only means by which information is conveyed. For students who are color blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.
Image Description
The image contains two side-by-side bar charts titled “Student Device Preferences.” Both charts display the same data but use different color schemes: the left chart uses red, blue, and green bars, while the right chart uses grayscale bars. The horizontal axis is labeled “Student Device Preferences,” and the vertical axis is labeled “Number of Students,” ranging from 0 to just over 30. In both charts, the data show that smartphones are the most preferred device, with approximately 21 students. Laptops are the second most preferred, with about 16 students. Desktops are the least preferred, with approximately 9 students. The charts illustrate how the same information can be represented with different visual styles, highlighting potential accessibility considerations related to color use.
Example 2: Accessible Bar Chart
Students who are color blind can distinguish between high-contrast shades. In this chart, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require alt text and an image description.
Image Description
The image shows a single bar chart titled “Student Device Preferences.” The vertical axis is labeled “Number of Students,” and the horizontal axis lists three device types: Desktop, Smartphone, and Laptop. A legend in the upper right identifies the bars by color. The chart displays data for a total of 45 students. Smartphones are the most frequently used device, with 21 students. Laptops are the second most common, used by 16 students. Desktops are the least used device, with 8 students. The chart visually compares student preferences across the three device types.
Decorative Images
If an image does not add meaning, i.e., if it’s included for decorative or design purposes only, or if the image is adequately described in the caption and/or surrounding text, it doesn’t need alt text. Including alternative text descriptions for decorative images “simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.”[1]
When the alt text is left blank, the screen reader will not announce the presence of the image and will skip to the next content.
Find the Trail
Test yourself to see if you know the difference between the three ways to make an image accessible:
How To Steps
Select the arrow next to the guidance to view steps with examples.
In Practice: Using Figure Captions, Alt Text, and Image Descriptions
Select the arrow at the bottom of the slides to see examples, guidance, and tips for using Figure Captions, Alt Text, and Image Descriptions.
Adding Figure Captions, Alt Text, and Image Descriptions in Pressbooks
Select the arrow at the bottom of the slides to navigate through the steps of adding alt text, captions, and image descriptions to your images in Pressbooks.
Example of Caption, Alt Text, and Image Description
Differences Between Caption, Alt Text, and Image Description
In this excerpt, a functional figure includes a caption, alt text, and, because it is a complex image, an image description.
- The caption makes the connection between what is discussed in the chapter and the image.
- The alt text explains to someone using a screen reader a brief, more literal description of the image with a note that a fuller description can be read in an image description.
- The image description gives a fuller description of the image, including a transcript of any written text within the image, and may give a better sense of the image’s purpose.
Alt text: Three-section diagram of a capillary at arterial end, mid-capillary, and venous end. (image description available)
Help Writing Figure Captions, AltText, and Image Descriptions
Writing figure captions, alternative text, and image descriptions can take a bit of time and focus. The Image Accessibility Creator (through ASU EdPlus,) is a freely-available AI tool. When you upload your image, it will generate an image description, alt text, figure caption, and more for you to use.
Note: As with all AI, you will need to review the content generated for accuracy before using it.
Inspect for Accessibility
If you are making existing chapters in your Pressbooks accessible, you’ll want to inspect them to see if their images are already accessible. Your Pressbook (and all web pages) have a hidden, back-end made up of code. Don’t worry – you don’t have to learn to code to use this option of checking accessibility. By right-clicking on parts of your Pressbook and inspecting the code, you can see if your Pressbook is set up for accessibility.
Select the arrow to view the video and written guidance.
Guidance for Inspecting Images
View the Video
View the Video [from 2:47 to 3:44] to learn how to inspect your Pressbooks for accessible headings and organization.
How to Inspect the HTML Code for Accessibility by Theresa Huff (OER for Social Justice)
Read the Steps
Inspecting Images
While you can easily check for figure captions and image descriptions in your Pressbook, the alt text is hidden from view.
To inspect an image for Alt Text, right-click the image [1] and select Inspect [2].
An inspection panel will appear on the right side of your screen [1]. This panel shows the HTML or code side of the interface. Find the shaded portion, which corresponds to the text on which you right-clicked [2]. Look for the word alt, which shows alt text has been added. The words in quotes that follow alt are the alt text [3].
If no alt is found, then this image does not include alt text.
Find Your Footing
After reviewing this page, test your knowledge with the questions below.
Licenses and Attributions
“Accessible Images in Pressbooks” by Theresa Huff is adapted from “Images – Accessibility Toolkit – 2nd Edition” by Amanda Coolidge, Sue Doner, Tara Robertson, and Josie Gray for BCcampus, used under a CC BY 4.0 license, and “Writing Figure Captions, Alt Text, and Image Descriptions – Doing the Work: Diversity, Equity, and Inclusion in Open Educational Resources” by Veronica Vold for Open Oregon Educational Resources, used under a CC BY 4.0 license. “Accessible Images in Pressbooks” is licensed under CC BY 4.0.
- "Top 10 Tips for Making Your Website Accessible," UC Berkeley: Web Access, accessed March 27, 2018, https://webaccess.berkeley.edu/resources/tips/web-accessibility#accessible-alt. ↵
