Did you know?

All web images are required to have descriptive alt text. Most web editing tools now require alt text before an image may be loaded.

Creating Accessible Images using ALT Text

 

ALT text is meant to provide alternative or substitute text to images. Alt text allows students who are blind to access a description of the image. When writing alt text, it is important to ask yourself what information the image is conveying. Is it definitive, descriptive, or purely decorative?

Definitive or content images are the content. A good example of this would be a location map or a picture of a cell with the different parts labeled. This type of image definitely needs to be alt tagged with a pretty detailed Alt tag. (See steps below)

Descriptive or Supporting images help the content but aren't critical to it. An example, might be a picture of Einstein next to Einstein's Theory of Relativity. For sighted users this image lends some value but does it need to be descriptively alt tagged? The best practice in this situation would be to ensure the content in the image is also present in the text content itself. If you want to be on the safe side provide a descriptive Alt tag. (See steps below)  

For decorative images, leave it blank: Most sites contain a large number of images which are there for purely decorative purposes: things like spacer gifs, images forming the corner of a pretty drop shadow effect, floral patterns attached to item headers. All of these should have their alt attributes left empty. They add no extra information to the content, so as far as a screen reader or text browser is concerned they do not exist. Note: To leave the Alt Tag blank you still need to do the following steps:  

Steps if using Microsoft Word 2007:

  • Right click on picture.
  • Click “Size” on the shortcut menu.
  • Click the Alt Text tab and write a description or make sure that it is blank for decorative images.

Steps if using Microsoft PowerPoint 2007:

  • Right click on picture.
  • Click “Size and Position” on the shortcut menu.
  • Click the Alt Text tab and write a description or make sure that it is blank for decorative images.
The Alt and Accessibility
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum leo vitae dui sagittis id dictum mi ullamcorper. In euismod felis sed nulla adipiscing vestibulum. Nulla nec sapien at dui mattis rhoncus. Vivamus fringilla libero at turpis ultricies tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum leo vitae dui sagittis id dictum mi ullamcorper. In euismod felis sed nulla adipiscing vestibulum. Nulla nec sapien at dui mattis rhoncus. Vivamus fringilla libero at turpis ultricies tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec placerat augue ut felis ultrices tincidunt scelerisque dui vestibulum. Mauris non elementum velit. Phasellus odio est, rhoncus ut dictum et, mattis sed dui.

Useful Resources:

Section 508 has free web accessibility checking for web resources.

Wave is another free web accessibility evaluatin tool frequently used be instructors.

Last Modified 11/10/10