How can I make images more accessible?

Some people will be unable to see images and/or comprehend what they are meant to convey.

Alternative Text can help give context and meaning to an image.  This article answers the following questions about text alternatives for images:

IMPORTANT: Do not put large blocks of text inside an image! Images of text are NOT accessible.

What kinds of text descriptions should I add for images?

The type of text description needed for an image will depend on the complexity of the image, the meaning you intend for it to convey, and how it is being used.  The following are recommended guidelines for describing images:

  • Simple image with "simple meaning" and no surrounding text that adequately conveys its meaning - Add descriptive alternative text of 10 to 120 characters as outlined below. The alternative text should describe the educational/informational purpose of the image.
  • Simple image that is adequately described in the page content - If a simple image has a title, caption, or description that adequately conveys its meaning and would be the same as what you would put in the alternative text, leave the alternative text description blank and indicate it is a Decorative Image so the same information is not repeated more than once for users of assistive technology.
  • Complex image with "rich meaning" - Add a paragraph above or below the image that goes into more detail. Some pointers, such as "Next image," or "Previous image," will help tie them together. If the image is referenced from elsewhere in the document, add a paragraph below it that can serve as a caption, and then refer to it. If the longer alternative text is not feasible, create a link to an external web page that contains an appropriate description.
  • Any image that contains textual content - If an image contains any text, include this textual content in either the alternative text or the text surrounding the image.
  • Decorative image - If the image is purely decorative or used for visual formatting, leave the alternative text description blank and indicate it is a Decorative Image to hide it from users of assistive technology.

What are some examples of text alternatives for images?

  • Alternative Text: “Scientist in a lab filling a vial with fluid”
  • Description in the text before or after the image: “Next/Previous image shows a female forensic scientist, Supervisory DNA Analyst, Kerriann Meyers, working in the DoD DNA Registry, Armed Forces DNA Identification Laboratory (AFDIL).  The scientist places samples in vials in a cartridge before loading it on the Next Generation DNA Sequencing (NGS) instrument.”
  • Reference farther away in the body of the document:

"... Figure 1.3 shows a female forensic scientist...."

[Image] Figure 1.3

Need more examples?

The Diagram Center website (opens new window) includes guidelines for authoring text alternatives for images (opens new window) and an Accessible Image Sample Book (opens new window) with excellent examples of image descriptions.

How do I add alternative text to an image?

You can add alternative text while embedding a new image in the Rich Content Editor, or edit an image you already embedded in the editor to add alternative text.

Add Alt Text while embedding a new image.

  1. If you do not already have an image embedded in the Rich Content Editor, select the Image button from the editor's toolbar to insert an image. The Image button displays a picture that looks like a landscape, with mountains and a sun.  For complete steps to add images, see How do I upload and embed an image in the Rich Content Editor as an instructor? (opens new window) or How do I upload and embed an image in the Rich Content Editor as a student? (opens new window)
  2. In the Upload Image dialog window, after selecting your image to upload, enter short, meaningful descriptive text in the Alt Text box. Or, if adding alternative text is not appropriate (see the guidelines above for details), leave the Alt Text box blank, and select the Decorative Image checkbox.
  3. Select Submit to confirm the addition of the image and its alternative text.

Note: On mobile devices or small screens, you may need to select the More (three dots) button in the editor menu to find the Image button.

Add Alt Text to an existing image.

  1. Select an image you have embedded in the Rich Content Editor by:
    • Clicking on it with a mouse,
    • Or placing your cursor to the left of the image, then holding down the Shift key on your keyboard and pressing the right arrow key.
  2. An Image Options button will appear like a speech bubble over the image. Select this button by:
    • Clicking on it with a mouse,
    • Or pressing Ctrl + F9, then Enter on your keyboard.
  3. In the Image Options dialog, enter short, meaningful descriptive text in the Alt Text box. Or, if adding alternative text is not appropriate (see the guidelines above for details), leave the Alt Text box blank, and select the Decorative Image checkbox.
  4. Select Done to confirm the addition of the alternative text.

Note: On some computers, you may also need to press the Function (Fn) key:  Ctrl + Fn + F9.