Alt tags

Images

Alt tags provide alternative text for images on a web site. Most images on your web page should have alt tags. Alt tags are inserted into img tags like this:. <img src="http://www.iastate.edu/img/ISUbecoming.gif" width=200 height=31 alt="Iowa State University ... Becoming the Best">

Alt tags should be meaningful and provide the same information that visual users see. The alt tag below doesn't provide meaningful information. Those who can't see the logo don't what department it refers to. <img src="nameplate.gif" width="200" height="150" alt="Department logo">

A better alt tag would be: <img src="nameplate.gif" width="200" height="150" alt="ISU University Relations logo">

Alt tags don't need to describe everything in an image. It would be nearly impossible to accurately depict a photograph, for example. But alt tags need to convey the same information you intend the image to convey. A good test for alt tags is to pretend you are reading your document over the telephone.

Non-essential page elements

Bullets or non-essential page elements, such as graphic spacers, should include an * alt attribute in the img tag. The * alt tag hides non-essential graphic elements for those who are using adaptive technologies or text-only browsers. Example: <img src="bullet.gif" alt="*">

Animations

Animated images need alt tags that describe both the appearance and the action of the art. For usability reasons, it's best not to use animations if they are strictly for graphic embellishments and don't provide any real content. Here's an example of an alt tag for an animation. <img src="car.gif" width="60" height="70" alt="A blue animated cartoon car driving up and down the right side of the image boundary">

Image maps

Alt tags should be included for each image map hot spot. Example: <map name="banner"> <area shape="rect" alt="Calendar" href="calendar.html" coords="36,59 107,85"> <area shape="rect"alt="Phone, e-mail" href="phone.html" coords="108,59 185,85"> <area shape="rect" alt="Maps" href="map.hmtl" coords="186,59, 240,85"> <area shape="rect" alt="Search engines" href="search.html" coords="257,59 295,85"> </MAP> More on accessible imagemaps

Title tags on links

"Title" tags can be added to any link to help clarify what's on the other side of the link. Title tags are particularly useful on images that are used as links. Example: <a href="feedback.html" title="Send feedback on the Iowa State site"> <img src="feedback.gif" alt="Feedback" width="35" height="20" border="0"></a>

Adding alt tags to all images is an easy way to improve the accessibility of web pages.