Creating Accessible Images

Overview

Images can present a major obstacle to individuals that are blind or have low vision. Fortunately, there are several relatively simple techniques that if implemented correctly can make an image accessible. Section 508 Standard (a) addresses proper use of an image.

Section 508 - Standard (a)

A text equivalent for every non-text element shall be provided e.g., via "ALT- Tag " or in element content "D-Link."

back to top

Explanation - Standard (a) - Accessible Alternatives for Images

When a user reads or views a web page with a text browser, screen reader, or a browser with the image loading function turned off, images are displayed/read as "IMAGE" or as the name of the image file unless some additional steps have been taken to describe that image. The lack of use of one of the following techniques make it difficult for users to know what information the image is trying to convey.

A QuickTime movie demonstrating a screen reader encountering images with and without alt-text is available at http://www.doit.wisc.edu/accessibility/video/scnrdrpt1.mov. This video requires the QuickTime player.

The alt-text attribute provides a description phrase for each image. Short for alternative text, alt-text is simply a way to provide text equivalents to non-text elements on a page. This includes images, graphical representations of text including symbols, image map regions, animations, scripts, and images used as list bullets, spacers, graphical buttons, etcetera.

The alt-text attribute is a text string of up to 256 characters, (10 words or less is recommended -- some say no more than 5 words) enclosed in quotation marks. Although including alt-text is an essential part of building accessible sites, what the alt-text says is equally important. Several guidelines:

• Keep the wording simple.
• Sometimes it is easier to describe what the function of the graphic is rather than what it is or looks like.
  (e.g., The function of a navigation button is more important than what it looks like)
• Imagine that you are describing this image or its function to a friend over the telephone. This technique will work well for constructing proper alt-text.

A couple of key concepts for the Alt-text are:

1. Alt-text gives the individual using the web page a quick description of the image's function
2. Alt-text is most helpful when what is being described is stated as clearly and concisely as possible. As alt-text gets longer, it could actually become more confusing or take more time than is helpful.
3. If the content the image conveys is lengthy (more than 256 characters) consider using either the d-link or longdesc techniques presented further down in this page.

back to top

Techniques

alt-text

Any content that displays on a web page has a level of coding hidden in the background. This coding is called HyperText Markup Language (HTML). We've displayed the HTML for the image of Henry Mall below the picture.

<img src="/images/henrymall1.gif" alt="University of Wisconsin - Madison's Henry Mall">

This HTML code has two components to note.

src="/images/henrymall1.gif" - This identifies that the image is stored in a folder named images and that the name of the image is henry_mall.gif.

alt="University of Wisconsin - Madison's Henry Mall" - Alt is the alt-text assignment. The content within the quotes will be read by the screen reader or displayed to viewers with the image viewing functionality turned off.

Creating alt-text

The process of adding alt-text to images will vary dependent upon the HTML editing software in use. If you edit HTML code manually, you will need to become familiar with the proper syntax for alt-text. If you use a software HTML editor such as Macromedia Dreamweaver, you can avoid spending time within the HTML code.

Adding alt-text to an image in Macromedia Dreamweaver is done through the Image Properties palette. To add alt-text inside Dreamweaver, select the image by clicking once on it. Enter a short description (up to 256 characters) of the image in the Alt box inside the Image Properties palette (see picture below).

d

Descriptive Link

There are instances where alt-text just can't convey enough information about an image. A d-link can be used to more clearly convey information about an image.

A QuickTime movie demonstrating a screen reader encountering images with a d-link is available at
http://www.doit.wisc.edu/accessibility/video/ScnRdrpt2.mov. This video requires the QuickTime player.

Consider the image of Henry Mall that follows. Suppose the intent of the image is to notify viewers that the architecture of Henry Mall is dominated by the large pillars on both the BioChemistry Building and the Agricultural Hall. The alt-text for this image states, "Pillars at Henry Mall". An argument can be raised that this alt-text doesn't deliver enough information.

A D-link is used to provide longer descriptions or an in-depth description of something the author of the page wants to include more details about. The D-link, is only a small, very unobtrusive D (lower or upper case is the choice of the designer) on the graphical page. This is the only instance where the graphical version of the page will be altered.

d

Creation of a D-link takes several steps:

1. The letter "d" is placed next to an image.
2. The designer creates a new web page and types the detailed description of the image. This page is saved with an appropriate name.
3. Make the "d" into a link connecting the user to the descriptive file created in step #2.

A fourth step may be to add a link to the file created in step #2 that returns the user back to the original file.

Longdescription attribute

A third option that may be considered for images is the longdescription HTML attribute. (This technique is also known as the longdesc attribute.) This technique is comparable in functionality to the d-link, but a bit more complicated. Dependent upon the HTML editor that you are using, the use of longdesc may require you to work within the HTML code. If that scares you, than avoid this technique and rely upon the alt-text and the d-link. If you use either Macromedia Dreamweaver MX or are comfortable working in HTML code, then this technique may work for you and can be a substitute for the d-link.

Adding longdesc to HTML code

Understand that all images in a web page are encoded within the HTML using an IMG tag. For example:

<IMG src="henrymall1.gif" alt="Pillars at Henry Mall">

If you can find the IMG tag that refers to your image, you will be able to add the longdesc code. Note the bold code in the HTML below.

<IMG src="henrymall1.gif" alt="Pillars at Henry Mall" longdesc="mall_desc.htm">

In this example, longdesc="images_d2.htm" is a message to screen reader technology only. The user is able to hear the alt-text and is also presented the opportunity to link to the description file. This link is transparent to individuals using visual browsers (Internet Explorer, Netscape Composer, Opera, Mozilla, etc.).

Adding longdesc using Macromedia Dreamweaver MX

Dreamweaver MX has a set of accessibility functions that can be activated. (Information about the accessibility functions is available at the Macromedia Dreamweaver MX web site. One of these functions is an accessible image tool. If activated, Dreamweaver will prompt the user with a dialog box. This dialog box has a field for both alt-text and the filename of a longdescription file.

For additional information on Alt-tags and D-links see the video "Screen Readers and the Web" http://www.doit.wisc.edu/accessibility/video/index.htm

part 1, alt text segment of video
http://www.doit.wisc.edu/accessibility/video/ScnRdrpt1.mov

part 2, D-link segment of video
http://www.doit.wisc.edu/accessibility/video/ScnRdrpt2.mov

Other Considerations

Decorative Images

Alt-text, d-link, and longdesc are techniques to use for images that deliver content. Not all images on a web page have meaning. Some images are placed on a page by the designer to take up space. These are referred to in the web design community as spacer images. Designers may also develop a graphic that they use for bullets in a list. Again, it can be argued that these images don't have meaning. Decorative images still require an alt-text assignment. However, the alt-text is assigned an empty value. This is a signal to a screen reader that the image is decorative. The screen reader bypasses such an image. Empty alt-text can be assigned in several ways:

Adding an Empty Alt-Text Value to HTML Code

An example of empty alt-text is below. Note alt = "".

<img src="/images/spacer.gif" alt="">

Adding Empty Alt-Text using Macromedia Dreamweaver

As we've seen earlier Dreamweaver MX's property inspector is the tool a designer uses to assign alt-text. The alt-text field on the property inspector allows the designer to pick <empty> from its option box.

Form Submission Buttons

Designers may create graphics that they use in replacement of the standard form/query submission buttons. The two examples that follow provide both the standard form submission image and a graphic that is used as a form submission button. Note: Neither submission button completes any action in this example.

1. The standard form submission button.
2. A graphic that we designed used as a form submission button.

The first example is accessible as it is. No further markup is needed.

The second example needs help. A screen reader may read the filename of the image and even announce that the image is a button. Results differ by the screen reader in use. Remember that this button is a graphic. All images require alt-text. The fact that this image is used as a button doesn't matter. Appropriate alt-text for this graphic could be as simple as, "search".

Guidelines for Alt-Text

Keep the following suggestions in mind when assigning alt-text:

• Keep alt-text under 256 characters.
• Avoid using words such as image or graphic at the beginning of the alt-text. The screen reader user will know it is an image without such prompts.
• Try to describe the image as you would describe it to a friend over the telephone.
• There are times when alt-text can't equate to the purpose of the image. For example: An instructor places a picture of the Mona Lisa on a web page. The assignment for the week is to view the image and then write an essay describing their opinion on the significance of the facial expression in the painting. What is appropriate alt-text in this example? Providing the opinion of the instructor in any form, takes away the function of the assignment. In this example, the instructor would be encouraged to consider what process she/he would follow in the classroom to accommodate a blind student. This same process will suffice for the web. Faculty need to consider their pedagogy in such an instance.

back to top

Validation Techniques

The testing measures that follow can be used to evaluate compliancy of your web page(s) with the concepts presented for Standard (a).

• view the page in your browser with the image viewing functionality disabled
• listen to the page using a screen reader, Braille display or speech synthesizer
• evaluate whether the page is readable and functional in a text browser like Lynx, or in author mode in Opera with CSS, JS and images disabled
• view the page using the WAVE accessibility validation tool

back to top

complete the images self-assessment