Estimated reading time: ( words)
Summary: Alternative text, or “alt text” describes the content of images, graphs and charts. It should be added to every image that conveys meaning in instructional and communications materials including Moodle sites, word processing documents, and slide presentations.
On this page:
- Examples of alt text descriptions
- Alt text in Moodle
- Alt text in Canvas
- Alt text in Microsoft Word and PowerPoint
- Alt text in Google Docs and Slides
- Empty alt attribute
Alt text can be read by assistive technologies, which helps make sure more of your audience can access your content.
Alt text has a secondary purpose, too: it can help you, the author, make sure that the image you’ve selected communicates your intended purpose, which can help improve the overall quality of your content.
You do not need to include alt text for images and graphics that are purely decorative. However, you should include an empty alt attribute, which we’ll discuss below.
Alt text should answer this question: What is the content conveyed by the image?
The content of the image is not simply a description of the surface features of the image or graphic. Instead, describe what additional content the graphic contains. What information do you want the reader to gain from looking at the image? What is the main idea being expressed by the graphic? Write in simple, precise language, and keep the explanation brief. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
Here are some examples of alternative text for images:
Alt text = "Goldy Gopher"
If the context is general - for example, the U's Spirit Squad website - this is sufficient. If the context is a "Mascots of the Big 10" page, then better alt text might be "Goldy Gopher of the University of Minnesota". Or if the page is full of pictures of Goldy in different uniforms, the alt text might be "Spirit Squad Goldy in white uniform with maroon headband".
You don’t need to write full alt text if the information about the graphic is located elsewhere in the document, for example if the description of the image is already part of the body text or image caption. Longer descriptions (more than about 125 characters) should be included in the body text of your document, rather than as alt text.
Adding alt text in Moodle is easy. Here is the dialog box you will see when you add an image to any page or label in Moodle:
Depending what version of Moodle you’re using, this dialog box may look a bit different. Notice the field labeled, "Describe this image for someone who cannot see it." Place the alt text in this field. If you check the box below it, labeled "Description not necessary", Moodle will insert a empty alt attribute (discussed below).
Canvas also makes it very simple to add alternative text for images. When you add an image through the rich content editor, enter in your alt text into the textbox given under the Attributes section as shown below:
Learn more about other accessibility features in Canvas to consider when designing your course site.
Add your image to the Word or PowerPoint document. Now, choose Format > Picture from the dropdown menu (or right click on the image and select "Format picture" from the menu). Click "Alt text", one of the options on the side bar. Here is the dialog box you will see:
This is a picture of the dialog box from Microsoft Word 2011. Depending on what version of the application you have on your computer, this may look slightly different. In any case, you will want to add the full alt text in the Description field and a shorter title in the Title field. The title can help the reader decide whether or not they want to read the full description.
After adding an image to a Google document, slide, or spreadsheet, select the image. Then Right-click (or control-click) on the image; a menu will appear. Select Alt Text, about halfway down the menu. The dialog box looks like this:
Add the alt text in the Description field. You can also add a shorter title in the Title field. The title can help the reader decide whether or not they want to read the full description.
Web-based content is marked up with HTML code that tells your web browser how to display text and images. The HTML image tag looks like this:
The empty attribute (also called "null") looks like this:
<img src="http://accessibility.dl.umn.edu/mammoth.jpg" alt=" ">
This attribute lets the screen reader user know that there is an image but that there is no description for it. The attribute is useful where the image is purely decorative but should not be used when the image conveys meaning.
If you’re working with images in a Moodle course web page, you don’t need to worry about this as long as you remember to click the box next to "Description not necessary" (Moodle adds the attribute for you in the HTML view). However, you do need to make sure to include the null attribute for decorative images in any other web context, including Drupal, Drupal Lite, Google Sites, Blogger, WordPress and the like.