Alternative Text

Below, you see a picture of an image with alternative text being displayed. When screen reading software passes over an image, it looks for this alt text so it can speak it. Without alt text, the image has no meaning in the context of the page. Special note: Alt text does not display on Macintosh computers, but the screen readers can still speak the text.

The image below shows the alt text being displayed for the image in a Web page.

If you are using a PC, you can pass the mouse pointer over the image below to see the actual alt text of the image.

Netscape Composer

To insert alt text using Netscape Composer, look for the alt text field when you are inserting an image:

Dreamweaver

To insert alt text using Dreamweaver, click on the image in the page, and look for the alt text field on the property inspector:

Insert Code Manually

To insert the alt text manually into the HTML code, look for the image source code for the image, and type your description after the alt tag. Be sure to surround the description with quotation marks: Example:

<img src="../images/basket_apples.jpg" alt="Image of a basket of apples for the teachers">

Image Maps

Image maps are used to make an image interactive. There are two examples below that show how image maps can be used to make multiple areas of an image individual links. The different areas can then have alt text applied to them. Hover your mouse over California, Texas and Georgia to see the alt text.

Dreamweaver has the ability to map an image. When the image on a page is selected in Dreamweaver, the property inspector has the mapping tools in the lower left corner of the inspector. You can use the circle, rectangle or point-to-point mapping tool. Once the image is mapped, you can add alt text to each area. See the images below to see the mapped regions and the image inspector.

Dreamweaver

The left circle shows the three mapping tools. The right circle shows where you would insert your alt text for the mapped area. To use the mapping tool, click on one of the three shapes, and click and drag on the image.

Image Map for Navigation Bar

This is the same as the example above, except we are applying mapping to a navigation bar. Hold your mouse over the navigation bar text: Home, Calendar, Mail, Site Map and Search. You will see the alt text being displayed. If the alt text is not present, screen reading software will not know what each of the links is.

Below you see the mapped regions of the image.

Again, notice the mapping tools and the alt text box on the property inspector in Dreamweaver.

Image Maps: Server-Side vs. Client Side

Image maps can be server-side or client-side. The above example is a client-side image map, i.e., the action is taking place in the user's browser. If you are using a server-side image map, you must supply redundant text links for every link on the graphic. An example follows:

Home | Calendar | Mail | Site Map | Search

D-Links

D-Links are used as a way to describe a more complicated graph or table to a blind individual. The D-Link is an alternative to using alt text, and is needed for things that require a longer explaination. Remember that alt text can contain only 256 charcaters. The following is an example of a D-Link.

D

The graph is an image that is showing a lot of information. You could not use alt text to describe the information fully. The small D to the right of the graph is a link to another HTML page that describes the graph fully in text. In order to do this, I created a text-only page that described the graph in full detail. I connected the "D" to the description page.

Longdesc Attribute

This is a similar technique to the D-link. You can use the text description using the "longdesc=" attribute within the <img src="" > tag. The is the same as the D-link technique above, except you do not have type the letter "D" after the image. Instead, you insert the "longdesc=" into the source code of the image:

<img src="pie_chart1.gif" alt="Click the image for a text description of the Pie Chart of Disabled Students for the Academic Year 2000-2001" longdesc="pie_chart1.html">

Notice that the longdesc is pointing to another HTML page, which of course, has the description of the image in text format. To access the text version, you simply click on the image.

Images for Decoration Only

In many cases images are used on a web page for decoration only. This means that the image contains no important imformation in context of the page. An example of a picture for decoration only follows.

This picture appears on the Center for Excellence in Teaching's home page. It is not a link, and does not contain any important information. It is only there for visual appeal.

As explained above all images should contain "alt text". Since the image contains no important information, we are going to insert a place holder (empty) where the alt text would normally appear. This will allow the screen reader to skip over or not speak the image.

Dreamweaver

In Dreamweaver, you click the alt text pulldown menu, and select <empty>. As you see, the box displays the word "<empty>". The "empty" inserts the spacer (which is " ") into the HTML code for you as shown below.

Insert Code Manually

<img src="../images/eagleflag.jpg" alt=" ">

Note: Be sure to place a space in the middle of the quotations, or the spacer will not work properly.

Back to top

Navigate to other How To pages with the links below.