10 Writing Image Descriptions

On This Page

• Key Takeaways
• Overview
• When is a Description Needed?
• Image Description Methods
• Core Principles
• Method 1: Alt Text in Image HTML
• Method 2: Description in Surrounding Text
• Method 3: Image Caption
• Method 4: Long Description on Separate Page
• Method 5: Decorative Images
• When to Go Further

Key Takeaways

• Evaluate each image for its purpose, and confirm with SME.
• Include only the key features as determined by context.
• Determine which description method to use based on level of detail needed. Whenever possible, include image descriptions in a format available to everyone who views the document or web page. If you need to include a long description, chances are many people will benefit from it.
• Alt text should be provided for informational images, and to indicate where descriptions should be found (if provided in surrounding text, captions or links).
• Images that do not convey meaning can be marked as decorative.
• For long descriptions, use formatting to show structure.

Overview

Image descriptions are required in most cases to make images accessible. They are of particular importance to screen reader users who are blind, as a text description is the only way they may be able to access the information in the image. However, some learners may have other disabilities — such as to cognitive, memory, or executive functions — and may benefit from image descriptions regardless of whether they use a screen reader.

This page describes the core principles of writing image descriptions, and specific recommendations for the five types of descriptions currently employed by eDS. If you are working on complex images for a specific field, please review Specialized Images (COMING SOON).

When is a Description Needed?

Most images require some form of alt text. Images are often used to highlight key information in the text, such as when an image:

• Demonstrates an action or example
• Sets a mood for the text content
• Shows a process as a diagram

The exception is when an image doesn’t add anything to the text content on the page. These decorative images either repeat information without adding to it, or provide visual decoration on the page.

Image Description Methods

There are four main methods available for providing alt text, and one for decorative images:

1. A short description written in the image’s HTML (for many images)
2. A description provided in the text surrounding the image (for images that can be adequately described in paragraph form)
3. A caption below the image (for images that have key information that should be highlighted for all learners)
4. A long description written on a separate page, and linked to on the page with the image (for complicated diagrams)
5. Marking an image decorative (for images that do not convey important information)

You can mix and match these methods to meet the needs of your content. For example, an especially complicated image may require some combination of paragraph text, alt text, a caption and a description on a separate page.

The rest of this document describes how to write for each of the five methods.

Determining Which Method to Use

The option you choose should take into account the following:

• If the image were removed, how would the content be affected? If the answer is “not at all”, consider marking the image as decorative.
• How complex does the description need to be? If the answer is “longer than 125 characters”, consider a larger format like paragraph descriptions or a separate description page.
• Would a description of this image benefit everyone in your audience? If the answer is “yes”, consider adding the text as a paragraph or caption on the same page. If the answer is “no”, consider adding the alt text in HTML or on a separate page (depending on length).
• Does a standard convention for the type of image already exist? This is most common for complicated images with domain-specific designs and notations, like graphs. For more information, see Specialized Images (COMING SOON).

Another factor that may affect your decision is whether the image has a standard convention for how its description should be written. Please review When to Go Further on this page for details.

Core Principles

Writing descriptions for all methods involves the same core principles. The core principles to keep in mind are:

• Context is key
• Be concise
• Don’t write “picture” or “image”
• Set the scene
• Use formatting to provide structure

Context Is Key

Images do not necessarily have meaning in themselves. An image used in one scenario may contain valuable information, while in another it could be purely decorative.

Likewise, the complexity of the image’s description will also be based on the scenario. If the image shows a diagram of a complicated process, it may need a detailed description in a scientific journal, but a simplified explanation in a general press article.

Context is the determining factor when evaluating an image. The same image could require a detailed description in one situation, but only a brief description in another. When evaluating the image, ask yourself and/or your SME the following questions. Knowing the answers will help you determine which type of image description to apply.

• How essential is this image to course content?
• How much detail do learners need to know?
• How much of the image is already described in surrounding text?

When deciding the level of detail learners will need to know, consider:

• What is the desired level of mastery?
• Will learners be assessed on their understanding of this image? What will they need to do to pass the assessment?

The following table shows how the answers to these questions relate to each description method.

Be Concise

Alt text provides information from an image that isn’t present elsewhere in your content. Therefore, the goal is not to describe all the details of an image, but to present information needed to understand the rest of the content. You will compare the image to the rest of the content to determine what “information gaps” you will need to fill in.

Unnecessary details can cause information overload. Provide only the key information with a minimum of descriptions and filler words.

Describing visual elements of an image may not be necessary unless your audience members need to know them for a specific reason, such as to answer questions on an assessment. On diagrams, describing the relationships symbolized by shapes and colors is usually the better choice.

Don’t Write “Picture” or “Image”

Screen readers usually announce that something is an image before reading the alt text. Writing “Picture of…” or “An image of…”, etc. is unnecessary.

When writing descriptions in surrounding text, it may be useful to reference the image directly. When doing so, you don’t need to write “picture” or “image”, either. Instead, you can reference it directly based on what it is. For example, if it’s a diagram, just say “diagram of X”. It’s a good idea to use the same type of language in your description as in the image’s alt text. So if you call the image “diagram of X” in surrounding text, make sure the alt text also starts with “diagram of X” for clarity. If the image has a caption with a label, you can refer to the label, e.g. “Figure 2.4”.

Set the Scene

It can be appropriate to begin your alt text with a high-level summary of what the image represents. Details can be provided in additional sentences.

For example:

• “Portion of family tree. The parent, David, has two children, Raul and Sabine.”
• “Bar graph of trash collected in pounds, years 2019 through 2021. From earliest to latest: 29, 15, 64.”
• “Da vinci’s Mona Lisa. A woman smiling in front of an imaginary landscape.”

If your document or course includes a number of images with captions, or simply a large number of images, it may be useful to give each image a unique label. For example:

• Figure X.Y, where X is the chapter/module number and Y is the image number for that section.

If the image is more fully described elsewhere, direct learners to where they can find the full description. Standard directions include:

• “Bar graph of program enrollments. Full text description above/below image” (for descriptions in text or captions, or for a link to a separate page provided in a caption).
• “Depiction of step X” (for images next to a set of instructions).

Use Formatting to Provide Structure

For descriptions in surrounding text and on separate pages, all the same formatting options are available for standard text. Features like headings and lists can be used to help describe relationships between different parts of the image, and provide quick navigation options.

When using formatting to denote structure, make sure to explain its meaning before the formatting begins. For example, if you have a set of nested lists, mention what the sublists mean. If subheadings indicate subtopics of the main topic, mention this before the first subheading. For example:

• “The following lists each position in the company org chart. Subordinate positions are listed under their managers.”
• “The infographic begins with a main title and introductory paragraph. Subtopics are then listed as their own sections.”

Headings can be used to label topic changes. Subheadings can be used to show subtopics and therefore relationships between information. In long descriptions, headings are typically used to support navigation, with an overview coming first followed by the detailed description of each part of the image.

Lists with sublists can be used to organize related data or show hierarchies. For example, a company org chart can be organized with the company president as the first bullet and the vice president(s) as bullets under the president. Subsequent levels would each have their own sublist.

As another example, a common type of infographic will have multiple headings with additional text after them. To show that the additional text is related to a specific heading, each text block can be listed after the heading as a bullet point.

Method 1: Alt Text in Image HTML

The most common accessibility solution is to put a short description in the HTML for the image. This text would not appear visually on the page, and typically only screen reader users would be able to access it.

This text is called alternative (alt) text, because it will appear for all users as an alternative if the image doesn’t load correctly. For this reason, alt text is an important resource not only for screen reader users, but also learners using mobile devices or with unreliable internet connections.

When to Use It

Alt text in HTML is best used when:

• The image can be described in a sentence or short series of sentences (about 125 characters or less).
• The alt text provides information that can’t be found in surrounding text.
• The alt text does not contain mathematical formulas or symbols.

If you find that your description can’t fit within the 125 character limit, consider providing a long description in paragraphs around the image or on a separate page.

How to Write It

Alt text is limited to about 125 characters or less. A tool may allow you to write more, but some screen readers stop reading after a set number of characters. For this reason, keep to the 125 character limit.

Alt text by necessity must be short and only focus on key details, like data points, structure, or the emotional response the image is trying to evoke. If alt text is used to point the learner to a longer description, additional description in the alt text is not required.

Avoid unnecessary words, but make sure you are being grammatically correct (for comprehension purposes). Incomplete sentences are allowed so long as they are understandable.

Method 2: Description in Surrounding Text

Some images can be adequately described in text paragraphs without additional subsections or structure, like lists. These descriptions can be added directly into the course page around the image if it doesn’t break the flow of the rest of the content.

If your image requires a long text description, consider adding it around the image before creating a separate page. This has the benefit of making the description available to everyone in your audience, and may even provide extra context that helps explain your image. Chances are, if blind learners can benefit from a detailed description, people with other needs will too (such as people with cognitive disabilities, learning impairments, and memory problems).

When to Use It

Descriptions in surrounding text are best used when:

• More than 125 characters are needed, but the description is not long enough for subsections
• An in-depth description of the image would benefit many learners

How to Write It

Text descriptions should reference the image directly. Ideally, start with a high-level overview of the image, describing its contents and purpose, along with any key labels, relationships, and trends. Then list details according to the needs of your SME.

If an graph contains data, list the data that is important based on the needs of the SME. If only some data points or general trends are important, then list them only; if all data points are important, list all of them, possibly in a formatted list or table.

For diagrams, describe relationships between features. As with all image descriptions, visual information like colors and shapes are not usually necessary, but sequences and relationships are usually key information. If visual information is referenced elsewhere (such as in a course lecture), it may be appropriate to describe the details attached to the visual information. For example, if the instructor references “green dots” on a scatter plot in a lecture, make sure that part of the data set is described using both the text label and the color/shape.

If the image is used to convey a mood, describing the concept the image represents may be appropriate, rather than individual features.

If the image requires a detailed description for domain-specific reasons (such as a description of a painting in an art or history class), see When to Go Further on this page.

A text description should be paired with image alt text to direct learners to where they can find the description. For example, the alt text could say “Picture of lunar surface, taken 2021. Full text description above image.”

Text descriptions can also be paired with a caption to highlight important features of the image. To continue the previous example, a caption for the image might say “Picture of lunar surface, taken 2021. Note the Copernicus Crater as a light spot left of center.”

Method 3: Image Caption

Image captions associate text directly with the image. The text appears to all learners directly below the image. It will either appear as though separate from the rest of the page content, or (if styled) floating to one side.

Image captions can supplement a longer description in text or stand alone. In either case, include alt text on the image identifying the image and directing learners to the caption.

Captions should be relatively short. Although there is no character limit for captions, they are not part of the main content and therefore shouldn’t include paragraphs of new key information. The can, however, point out features of the image that may not be described elsewhere. In this manner, they can be used to direct all learners’ attention to aspects of the image that are particularly important.

When to Use It

Captions are ideal for:

• Descriptions that are too long for the alt text method, but too short for the long description method.
• As a supplement to descriptions in the text around an image.
• Pointing out key information that all learners need to know.
• Listing labels on the image that are important, but don’t need a visual description.

How to Write It

Provide a name for the image that can be referenced in both the alt text and the caption. The caption and alt text should both start with the image name. An example is “Figure X.Y”, where X is the module number and Y is the image number. This allows all captioned images in a course to have a unique identifier.

Captions should be relatively short, at most 2-3 (brief) sentences. They should be written as complete sentences besides the label.

For example:

• “Figure 1. A portrait of Harriet Tubman, photographed 1880. Tubman was an American abolitionist and political activist.”
• “Graph of x=y. Note the slope of the line is 1, resulting in a diagonal line rising to the right.”

Method 4: Long Description on Separate Page

Some images may require detailed descriptions that are specific to the needs of screen reader users. In these cases, a description that is detailed enough for screen reader users may be too long or distracting for other audience members. When this occurs, it’s best to put the description on a separate page, and link to it on the page that contains the image. This option still allows all audience members to access the content if they so choose, while keeping the main page of content a bit shorter.

When To Use It

Complicated diagrams may include features such as:

• Descriptions of elements that must be listed individually to provide full context to the diagram
• Elements that include sub elements or text descriptions
• Elements connected by arrows, flowchart symbols, or other indicators of relationships
• Shapes, colors, or other visual features that are required for learners to understand other course content or complete assessments

How to Write It

There are multiple options available for creating a longer description on a separate page. Regardless of what option you use, the description should be written the same. The only difference is how the page is formatted (see Methods for Applying Image Descriptions).

A separate page or document will be treated by the learner’s web browser as stand-alone from the page that contains the image, because it is. This means that the page must be properly formatted and follow accessibility guidelines, such as:

• The first heading on the page or document is a heading 1, which is a uniquely identifying title.
• The page title and filename (if different) is uniquely identifying and indicates the purpose of the document. Keep the name as brief as possible.
• Sections on the page or document are given headings. Headings do not skip levels.
• Lists are formatted using proper numbers or bullets.

Begin the document by providing a high-level overview of the image. Indicate what type of image it is (diagram, chart, infographic, etc.). Then in additional subsections, describe the image in detail.

Use lists to show structure as needed, such as for charts, processes, and hierarchies. Screen reader users can navigate through lists and are told what level they are at if the lists are properly formed, so sublists are a powerful tool for showing relationships.

To help learners navigate to the longer description, you will also write alt text and caption text for the image. Alt text will consist of a label and the text “Full text description below image”. The caption will consist of the same label and the text “View image description (opens in new tab or window) (if kept on an HTML page) or “Download image transcript” (if kept in a Word document). See Set the Scene in Core Principles for details about labels.

For domain-specific content standards, see When to Go Further on this page.

Method 5: Decorative Images

An image that is flagged as decorative is not described to screen readers. They are often used to provide graphic design elements to pages, such as dividers, icons, and non-essential graphics.

When to Use It

An image is decorative if it can be removed from the content without affecting the content’s meaning.

How to Write It

Decorative images do not require alt text. They should not be referenced in surrounding text.

When to Go Further

Specialized images contain information or features not covered in this general guide. They are often field-specific and may have their own alt text conventions. Examples include:

• Complicated diagrams that indicate relationships, directions, or steps
• Math content (including symbols and/or formulas)
• Science content (including charts, graphs, and diagrams)
• Language content (including words that are not in English)
• Art or music content (including musical notation)

If you encounter specialized images, please try the following:

1. Review this Pressbook for any established solutions for your field. (COMING SOON)
2. If no solutions for what you need are available, contact your resident accessibility expert, if you have one.
3. Contact ATAC (or have your resident expert contact them on your behalf).

If you find ATAC-approved solutions for your images, please consider sharing them with others at IU. Contact Carrie Hansel at chansel@iu.edu to have your solutions included in this Pressbook.