11 Methods for Applying Image Descriptions

On This Page

• Key Takeaways
• Overview
• 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

Key Takeaways

• Alt text, paragraph descriptions, and decorative images can usually be applied using built-in tools in most platforms.
• Image captions can only be applied with HTML.
• Long descriptions require either a Canvas page, Word document, or HTML page.
• A programming platform such as Visual Studio Code is required for creating stand-alone HTML pages.

Overview

This page builds upon Writing Image Descriptions. Once you have determined which method to use and have written your image description, you must then present the image accessibly to your learners. The following sections describe how to apply each description method using a variety of options where available, including interface options, HTML, external documents, and others.

Method 1: Alt Text in Image HTML

Interface Option

Products like Canvas and Pressbooks often provide a form for entering alt text. If one is available, enter your alt text into the form.

• Canvas: In the page editor, select the Insert Image option. The interface will provide a “Alternative text” box.
• Pressbooks: Image options are available in the Media section. For more information, consult the Pressbooks User Guide on Images.
  • From the page editor: Select Add Media. Upload the image if necessary. Once the image is uploaded, select it to see the “Alternative text” box.
  • From anywhere in Pressbooks: select the Media tab in the left-hand navigation. Upload the image if necessary. Once the image is uploaded, select it to see the “Alternative text” box.

HTML Option

Alt text can be specified in the image’s HTML tag. To add alt text in the HTML:

1. Find some text near the image and note it for step 3. This will help you find the image tag in the HTML.
2. Open the page containing the image and switch to the HTML editor.
3. Locate the text you noted in step 1. Nearby, there will be a tag that starts with <img. The image tag typically looks similar to the following:

The code you need is the alt tag:

1. Insert your alt text between the two sets of quotes (” and “).
2. If present, remove text that says data-decorative="true".
3. When you are finished, save your work.

The full image code would look like this:

Method 2: Description in Surrounding Text

1. Write your description of the image in surrounding text using one of two options:
   1. For shorter descriptions, include the full description in a paragraph before the image.
   2. For longer descriptions, introduce the image in a paragraph before the image, and discuss additional details after the image. Use the guidelines provided in Writing Alt Text to include key details in the image description.
2. When inserting the image, you have two options: to provide alt text or mark the image as decorative.
   1. If a short description of the image is still a good idea (to clearly identify it, for example), provide the description in alt text.
      1. Interface method: provide a description in the text box.
      2. HTML method: provide the description in the alt="" tag.
   2. If the image is already adequately described, it doesn’t need to be announced to screen reader users.
      1. Interface method: select the option to mark the image as decorative.
      2. HTML method: leave the alt tag empty, and include data-decorative="true" in the image’s HTML. For example:

Method 3: Image Caption

HTML Option

As of August 2021, captions on Canvas, edX, and Pressbooks can only be applied with HTML. They can not be applied anywhere that does not support HTML.

Captions are created using the <figure> and <figcaption> tags, which associates your caption text with your image. To create a caption:

1. Insert your image into your content as you normally would.
2. Make note of some text near the image. You will use this to find the image tag in step 3.
3. Open the HTML editor and find the text near the image tag.
4. Directly before the start of the image tag, write <figure>.

5. Add alt text to the image, if needed. Provide the label and write “See text description below image.” to direct learners to the caption.

6. Directly after the end of the image tag, write <figcaption>. This starts the caption text.

7. Write the caption label. If you’d like to make it stand out with bold text, surround it with bold tags: <strong>Figure X.Y.</strong>, replacing the numbers as needed.

8. Enter a space and write your caption text.

9. End the caption with </figcaption>.
10. End the figure with </figure>.

The full code would look like this:

The caption would look like the following image on the completed page:

Graphic Design

Figures by default are indented slightly compared to paragraph text. Once the figure is made, you can apply styles if you want to make the caption stand out even more. To do so, apply your styles to the <figure> tag, which will modify both the image and the caption together. Figure tags can take a variety of styles, including borders, background colors, padding, margins, and being centered on the page. For example, to add a background and border to the image and caption together, write:

This code would look like the following example:

This example is not very attractive, but shows the general principle. You can modify the design as you see fit.

Method 4: Long Description on Separate Page

Course Page Option (Recommended for Canvas)

1. Create a new Canvas page. Give the page a unique name that relates to the content of the image. If the image has a label, title the page with the label (e.g., “Figure X.Y”).
2. Write your description in the Canvas page. Use headings, subheadings and lists as needed.
3. When you are finished, run the Canvas accessibility checker. Fix any errors flagged by the checker.
4. Save the page.
5. Return to the original Canvas page with the image.
6. Link to the image description page under the image. For best results, use an image caption (method 3) to associate the link with the image. A recommended link name is “View full text description (opens in new tab or window)”.
7. Modify the image alt text to identify it and direct learners to the download link. An example might be, “Line graph for question 1. Full text description below image.”
8. Add the following to the link anchor (<a>) tag: target="_blank". This will tell the learner’s web browser to open the image description in a new tab or window.

9. When you are finished, save your work.
10. Test the link to make sure it works properly.

The full code might look like this:

Word Document Option

This backup method applies to Canvas. It can be used if the course page method doesn’t work for whatever reason, or if the document will need to be reviewed or modified by learners (such as a graphic organizer, infographic, or study guide).

In this method, the image is contained on a webpage in the platform, and the detailed description is housed in a Word document. The Word document is then provided as a download link directly below the image.

To create a word document image description:

1. Apply the image to the course page as you normally would. Save the page.
2. Open Microsoft Word on your computer.
3. Create a new file and save it. Give it a unique name that relates to the content of the image. If the image has a label, title the file with the label (e.g., “Figure X.Y”).
4. Using a Heading 1, on the first line of the page, write the same image title you used for the file name.
5. Write your description below the Heading 1. Use additional subheadings and lists as needed. How to make a Word document accessible.
6. When you are finished, run the Word accessibility checker. Fix any errors flagged by the checker.
7. Save your work.
8. Upload the file to your course. Consider making a folder for image descriptions if you have many.
9. Link to the document underneath the image. For best results, use an image caption (method 3) to associate the link with the image. A recommended link name is “Download image transcript”. If you have multiple transcripts on a page, consider naming each link uniquely.
10. Modify the image alt text to identify the image and direct learners to the download link. An example might be, “Line graph for question 1. Full text description below image.”
11. When you are finished, save your work.
12. Test the link to make sure it works properly.

Stand-Alone Document Option

eDS does not currently have a method established for complicated descriptions that reside in stand-alone documents. Contact your local accessibility expert for guidance.

HTML Option (Recommended for edX)

In this method, a separate HTML page is created to house the image description. The page is linked to from the web page containing the image, and opens in a new browser tab or window.

The HTML option is the primary option used in edX. Document downloads are also available as a backup. The HTML option can also be used on other platforms that allow for the creation of full HTML pages, like websites.

This method uses a more complex template. Note that all features are REQUIRED in order for the page to be correctly formed and accessible. You should replace text in all caps with your image’s information.

1. Create a separate html page. This can be done in a dedicated HTML editor.
   1. Name the page with a unique identifier that includes course name/number (if applicable), section of the material the image is contained in, and a descriptor of the image.
   2. Save the file in the format .html

For example:

2. Copy and paste the following code template into your HTML document.

3. Add your content to the page. When deciding what information should go on the page, use guidance from Writing Image Descriptions and your local accessibility expert.
   • Your page’s uniquely identifying title should be placed between:
     • The <title> and </title> tags (this shows the title in the user’s web browser)
     • The <h1> and </h1> tags (this shows the title at the top of the page)
   • Under Diagram Contents, include a description of the image that introduces its basic concepts and summarizes its purpose and features.
   • If the image includes details, include them in list form. Introduce the list by describing what information is included and how it’s organized.
   • If your page’s content is primarily NOT in English, replace the “en” in the html tag with the correct language code (see Language Tags for details).
     • For example, for a page that is entirely in Spanish except for a few English words or phrases, you would use the following code: <html lang="es">.
   • Be as brief as possible. Include only information necessary to understand the concepts included in the image. A description of each visual feature isn’t necessary unless the information is required for full understanding of the content or for assessment purposes.
4. Save your HTML page in shared file storage.
5. Upload your HTML page to the web platform where the image is located (in edX, Content > Files & Uploads tab).
6. Copy the URL to the file (in edX, push the “Studio Link” button next to the image).
7. Go to the web page where the image is located.
8. Link to the document directly adjacent to the image (usually right below it). Use the following template:

9. Paste the file URL where the template says URL_HERE.
10. Provide descriptive text that indicates the purpose of the link. In edX, we use the following: “View image description (opens in new window)”.
11. In the image alt text, include a brief description of the image and an indicator of where to find more information. In edX, we use the following: “Full text description below image”.

Some notes about this link template:

• The code target="_blank" is required to make the HTML page open in a new browser tab.
• The text “(opens in new window)”, or a variation of it, is required to let screen readers know where to find the contents of the link.

The following code is an example of how the image, with link to the description, would be written on the finished web page.

Option 5: Decorative Images

Interface Method

Many websites and programs have an interface option to mark images as decorative. Examples include Canvas, edX, and Pressbooks.

In later versions of Microsoft Word (2016 and later), this option is available if you select the image, right-click and choose “Edit Image Options” from the menu that appears.

HTML Method

In HTML, decorative images are ideally marked with two features:

• The code data-decorative="true"
• An empty alt tag (alt="")

If the editor you’re using won’t allow the data-decorative code, an empty alt tag will usually be enough.

Below is an example of an image marked as decorative.