Images

Whenever possible, use text, not images, to create text content. Images of text lose fidelity when enlarged, which can make the text difficult to read, especially for users with visual impairments. Also, text downloads much faster than images. Instead of using images, try to attain all visual effects using cascading style sheets.

For images to be accessible to people who are unable to see them, they must be described using text (if informative) or hidden from assistive technologies (if decorative).

Users who are unable to see images depend on alternative text, often abbreviated “alt text”. Alt text is a short description of the image, residing behind the scenes, where its purpose is to communicate the content of an image to people who can’t see it (for example, a person who is blind, using an audible screen reader or Braille device).Specific techniques are provided below for adding or editing alt text using HTML and using a rich content editor.

Techniques using HTML

Simple images

In HTML, add alt text to the <img> element using the alt attribute, as in the following example:

<img src="blossoms.png" alt="Cherry trees in bloom on the UW campus">

Complex images

There are a variety of techniques in HTML for associating long descriptions with complex images. For details, see the Complex Images  section of the W3C WAI Images Tutorial.

Decorative images

Use either of the following techniques for instructing screen readers to ignore a decorative image:

• Avoid using the HTML <img> element for decorative images; instead present the image as a background-image using cascading style sheets (CSS).
• If using the HTML <img> element, add an empty alt attribute (alt="").

Techniques using a rich content editor

Rich content editors such as those used for adding content to D2L all include support for alt text on images. The following examples describe the process generically, with screen shots from D2L. However, the same process applies with slight variations in other web content authoring environments.

Simple images

When adding an image to a web page or document, simply look for a field or tab labeled “Alt text” or equivalent, and enter a short description into the field. If you are not prompted for alt text when adding the image, right click on the image after it’s been added and select “Image Properties” or equivalent, then look around in the image properties dialog for an “Alt text” prompt.

Complex images

“Alt text” fields are not suitable for long description of complex images. Instead, detailed descriptions of these images should be provided elsewhere (e.g., on the same page or on a separate page). The alt text field can then be used to provide an image title or summary, with additional information about where to find a longer description (e.g., “Figure 1. Percentages of Images with Alt Text. See below for a long description.”)

Decorative images

Some rich content editors today include a checkbox to identify when an image is decorative (see below for an example).

If you are using an editor that does not include a Decorative Image checkbox, you will need to do one of the following:

• Leave the Alt Text field blank. Some rich content editors will automatically tag the image as decorative. Be sure to test the page using an accessibility checker to be sure it worked. If it doesn’t work, you’ll need to use one of the remaining techniques.
• Switch to code view in your editor to access the underlying HTML, and add an empty alt attribute (alt="") to the <img> element.
• Avoid using decorative images.

Document authoring tools such as Microsoft Word and Google Docs include an option to add Alt Text to images. This is typically accessed by right-clicking an image and selecting Alt Text from the pop-up menu. If no Alt Text option is available (as in older versions of Word), you can select Format Picture or a similar option, and look for Alt Text among the available options.

In the above image from Microsoft Word, note the “Mark as decorative” checkbox. If the image is purely decorative (i.e., not communicating any meaningful information), check this box and screen readers will ignore the image.

Alt text dialogs with title and description

Google Docs, older versions of Microsoft Word, and perhaps a few other document authoring tools, offer two fields for entering alt text, Title and Description. In these cases, the best practice is to enter alt text into the Description field and leave the Title field blank. The Description field is more widely supported by assistive technologies and is more likely to survive if the document is imported into other document formats.

Complex images

Complex images such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text. 

When adding an image to a D2L page using the content editor, you are prompted to enter Alt Text in the Provide Alternative Text dialog after selecting the image and adding the file. Alt text is a short description of the content of the image. It will generally be invisible to sighted users but exposed to people who are using technologies, such as screen readers or Braille displays. If an image fails to load, it will also be displayed to users.

The goal in writing good alt text is to provide equivalent communication to anyone who is unable to see the image. What are you intending to communicate with this image? Express that core idea in the Alt Text field.  Alt Text should be succinct, with just enough information to communicate the idea, without burdening the user with unnecessary detail.

Decorative images

If an image is purely decorative, leave the Alt Text field blank, and check the “Decorative Image” checkbox.