How to Create Accessible Graphics

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Images used as links and image maps

When an image is used as a link or as an image map, alternative text should be provided to describe the function of the link.  For example, this image is used to create a link to "Contact Us" page of a web site. 

The alt attribute should be: alt="Contact Us".  The HTML source code for this image would be:

<img src="graphics/contactusbutton.gif" width="121" height="34" alt="Contact Us">

Most screen readers identify links to the user so it is not necessary to specify that the image is used as a link.  For images that do not have text that are used as links, you should provide an alt attribute that describes the link not the image.  For example, this image is used to link the user to the site's home page. 

The alt attribute would be, alt="Home Page" and the source code would look something like this:

<img src="graphics/homebutton.gif" width="93" height="66" alt="Home Page">

If your image is used as an image map, you should create an alt attribute for each hot spot or linked portion of the image.  In addition, you should have an alt attribute for the image as well.  Let's look at an example.

This image is used as a navigation bar on a web site, but only a portion of the image has hot spots.  The rest of the image contains content so you should add an alt attribute to the main image that describes the content.  The source code would be:

<img src="graphics/navbar1.gif" width="343" height="129" usemap="#Map" border="0" alt="Information for the Masses">

The code for the image map should have an alt attribute for each area.  So the source for this image map would look like this:

<map name="Map">
<area shape="rect" coords="0,78,78,98" href="aboutus.htm" alt="About Us">
<area shape="rect" coords="288,84,343,99" href="search.htm" alt="Search">
<area shape="rect" coords="124,112,204,129" href="siteindex.htm" alt="Site Index">
</map>

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Top of Page || Return to Tutorials List