MENU

Alternative Text (Alt Text)

The Law

Section 508
Section 508 of the Rehabilitation Act of 1973 was amended in 1998 to require Federal agencies to make electronic and information technology (EIT) accessible to people with disabilities. The accessibility of electronic content like video is also required in this amendment.
  • 1194.22 (A): A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
  • 1194.22 (F): Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Universal Design

Creating alternative text for images on documents and online is beneficial for a variety of student populations, not just the visually impaired.

  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

Taken from WebAim’s “Alternative Text” article. 

Context Clues

As the content expert, it is up to you to determine what alt text is appropriate for your images. You can help make the determination by considering the context of the image. The first question you should ask when writing alternative text for an image is to decide if the image presents content and if the image has a function. If the image has a function, like acting as a link to a different web page, you’ll want to make sure the alt text is short and sweet.

Alt Text Should Typically

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically, no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • Not be redundant or provide the same information as text within the context of the image.
  • Not use the phrases “image of…” or “graphic of…” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Taken from WebAim’s “Alternative Text” article. 

Decorative Images

Decorative images do not present important content, are used for layout or non-informative purposes. When analyzing an image, determine whether the image is presenting important content. In many cases you can ask the question “If I could not use this image, what would I put in its place?” to determine appropriate alternative text. If you could get rid of the image with no impact to your work, it may be appropriate to add “decorative image” as the alternative text.

Examples

Figure 1

Never Stop Working logo

Figure 1: Young woman in pink shirt working

In the example above, the content being presented by the image is to inform the user of the business logo “Never Stop Working,” so a simple alt attribute that says “Never Stop Working logo” would be a good fit.

Figure 2

Visit Pexels for free stock photos

Figure 2: Young woman in pink shirt working

In this case, the image is also a link so it has content and a function. Whenever an image operates as a link, the function of the image must be presented in alternative text. Alt text that states “Visit Pexels for free stock photos” would work here.

Figure 3

Image contains written code to illustrate the necessity of alternative text.

Let’s again determine the context and the function of this image. In this case, the image is not a link, so it does not have a function. The context of the link isn’t immediately clear either. Is this image used supposed to convey the code on the screen? Is this image only supposed to be decorative? As you can see, there is no one right answer–the best alternative text will rely on the context and intended content of the image. You, as the content expert, will make the final decision.

Adding Alt Text (Microsoft Word, PowerPoint, and Excel 2016)

  1. Open a Microsoft document that contains an image that requires alt text.
  2. Select the image that needs alt text by clicking on it.
  3. Right click on the image to open the contextual menu.
    Right clicking an image in Microsoft Word opens a contextual menu. Select "Format Picture" in the contextual menu to add alt text.
  4. Select “Format Picture” at the bottom of the contextual menu. The Format Pane will now open on the right-hand side of the screen.
  5. Select the “Layout and Properties” tab in the Format Pane.
    The format picture tab is found in the Format Pane in Microsoft Word.
  6. Select “Alt Text” to open the Alt Text box.
    Opening the Alt Text option gives you two areas to add an image description: the Title and the Description.
  7. Fill in the Alt Text for the image.
  8. In the Description box, enter an explanation of the shape, picture, chart, table, SmartArt graphic, or other object. This box should always be filled in.
  9. In the Title box, enter a brief summary. This box should only be filled in if you are entering a detailed or long explanation in the Description box.
  10. Exit the Format Pane.

Adding Alt Text in Canvas

New Images

  1. Access a Canvas Course where you would like to upload an image.
  2. Select “Pages” on the left-hand navigation panel.
  3. Select “+ Page” in the top, right-hand corner.
  4. Select the “Images” tab on the far, right-hand side of the screen.
    Images tab in Canvas appears on the far right-hand side of the screen.
  5. Select “Upload a new image.”
  6. Select the image file you want to add to the page.
  7. An “Alternative Text” box will appear. Type in your alternative text or select the “Decorative Image” check-box if the image is only decorative.
    After uploading an image, an alternative text box will appear where you can add alternative text.
  8. Select “Upload.” The image should now appear on your new Canvas Page.
  9. Name the page and select either “Save” or “Save & Publish” at the bottom of the page to save your work.

Existing Images

  1. Access a Canvas Course where you would like to add alt text to an existing image.
  2. Select “Pages” on the left-hand navigation panel.
  3. Select the page you would like to open by clicking on it.
  4. Select “Edit” in the top, right-hand corner.
  5. Locate the image in the Text Editor. Select the image by clicking on it. The image will then be highlighted.
    Select the image to highlight it in the Canvas Text Editor
  6. Select the “Embed Image” option in the text editor.
    The Embed Image button looks like a small, framed image of a mountain with a sun in the sky.
  7. An “Insert/Edit Image” pop-up will now appear. Under the “Attributes” heading, you will see an “Alternative Text” box. Type in your alternative text or select the “Decorative Image” check-box if the image is only decorative.
    Add alt text to exisiting images on the Insert/Edit image pop-up.
  8. Select “Update.”
  9. Select either “Save” or “Save & Publish” at the bottom of the page to save your work.
    Select Save or Save and Publish at the bottom of the Canvas page.

Adding Alt Text (Adobe Acrobat)

  1. Open a .PDF document in Adobe Acrobat that contains an image that requires alt text.
  2. Select the “Tools” tab in the top right had corner of the screen.
    Select the tools tab in adobe acrobat.
  3. Select “Accessibility” under the “Protect & Standardize” heading.

  4. The Accessibility Pane will now open on the right-hand side of the screen.
  5. Select “Set Alternate Text.”
    The Set Alternate Text button appears in the accessibility pane.
  6. An Adobe pop-up will appear verifying the action. Select “OK” to detect all figures and images in the document that require alt text.
  7. On the Set Alternate Text pop-up, type in your alternative text or select the “Decorative Image” check-box if the image is only decorative.
    The Set Alternate text pop up will give you the option to enter alternate text or mark an image as a decorative figure.
  8. Move through various images in the document using the arrow keys at the top of the Set Alternate Text pop-up.
  9. When you have finished adding alt text, select “Save & Close.”

Alternative Text Resources

WebAIM Alternative Text

WebAIM illustrates quality alternative text and can help you determine the content and function of an image.

Alternative Text for Images – Oregon State University

This website helps you determine the type of image you are describing: image, link, decorative, complex, etc.

UMKC Resources

Accessibility Open Lab

Do you have concerns or questions about accessibility? Do you need help making videos, Word Documents, PowerPoints, Excel Files, or PDFs accessible? Come join our Accessibility Open Lab! Bring your questions and inaccessible materials with you.

Download Instructions for Adding Alt Text in Microsoft Word

Keep a copy of instructions to turn on automatic captions on YouTube Videos on your computer for easy reference!

Download Instructions for Adding Alt Text in Canvas

Keep a copy of instructions to turn on automatic captions on YouTube Videos on your computer for easy reference!

Download Instructions for Adding Alt Text in Adobe

Keep a copy of instructions to turn on automatic captions on YouTube Videos on your computer for easy reference!

Legal and Outside Resources

Section 508 of the Rehabilitation Act

Learn about Section 508 and UMKC’s legal obligation to create and deliver accessible content.