10 Using Images
Using Accessible Images
In this section, we provide recommendations to guide your inclusion of accessible, image-based content.[1]
What are images?
For the purposes of this discussion, we define images as non-text elements that include photographs, illustrations, diagrams, pictures, charts, graphs, and maps.
File types used: GIF, JPG, PNG
Who are you doing this for?
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 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
What do you need to do?
Before you can determine what to do to make an image accessible, you must identify its purpose or value to your textbook. Consider the following questions:
- Does your image serve a functional purpose? In other words, is it conveying non-text content to students?
- Or does your image serve more of a decorative purpose? In other words, is it primarily a design element that does not convey content?
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:
- Describe the image in the surrounding text.
- Describe the image in the alt tag.
- Create and link to a long description of the image.
As you work on developing your alternative text descriptions, keep the following recommendations and guidelines in mind:
- Remember that alternative text must convey the purpose and function of an image and is rarely a literal description of the image (e.g., “photo of cat”). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does. This means that the same image may need different alt-text depending on how it’s used. [2]
- For relatively simple images (e.g., photographs, illustrations), try to keep your text descriptions short, like a Tweet. You should aim to create a brief alternative (one or two short sentences) that is an accurate and concise equivalent to the information in the image.
- For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you intend to provide.
- Leave out unnecessary information. For example, you do not need to include information like “image of…” or “photo of…”; assistive technologies will automatically identify the material as an image, so including that detail in your alternative description is redundant.
- Avoid redundancy of content in your alternative description. Don’t repeat information that already appears in text adjacent to the image.
Descriptions in surrounding