Skip Navigation
The University of Arizona

Alt Tags

The alt tag or 'alternative text' is an attribute of the img tag. An alt tag should be included for every image within your web site.

The alt tag provides an alternate message to your viewers who can't see your graphics. Without alt tags, images on a web site are meaningless to these users. If you will be using graphic menu systems for navigation, these alternate messages are especially important aid to users without the ability to see your graphics. Adding an appropriate alt tag to every image within your web site will make a huge difference to the accessibility of your web site.


How to Add alt Tags for Accessibility:

An alt tag is inserted into a img tag by surrounding the alt tag message within quotes.

Example: 

<img src="UAlogo.gif" 
alt="The University of Arizona, 
Tucson AZ" />

The content of the alt tag should adequately describe the image depicted on the graphic without being too verbose.


Non-Essential Page Elements:

Bullets or non-essential page elements like graphic spacers should include a blank alt attribute in the img tag. The blank alt tag hides non-essential graphical elements from adaptive technologies and for those that are using text only browsers or browsers with graphics turned off. A blank alt tag is inserted into a img tag as alt="" or empty quotes.

Example:

<img src="bullet.gif" alt="" />

Image Map Hotspots:

All Image Maps should include alt tags for each hot spot. 


<map name="top-banner">
<area shape="rect" 
alt="Campus Events" 
href="events.html" 
coords="36,59 107,85">

<area shape="rect" 
alt="Contact Us"
href="contact.html" 
coords="186,59 240,86">
</map>

Animations:

If you have an animated image on your web page, provide a description of the actions and appearance of the animation to give users with images not displaying the same experience. For usability reasons, animations should not be provided on professional web sites if they are strictly for graphic embellishment and do not provide any real content. 


<img src="fish.gif" alt="A green 
animated cartoon fish swimming
up and down the right side of the
image boundary." />

Hyperlinked Images

The World Wide Web Consortium's guidelines recommend that you provide descriptive titles for all images used as links. HTML 4.0 introduced TITLE as an attribute that can be applied in various tags. Here the attribute is used as part of the <a> tag or Anchor Tag. This "title" attribute should clearly and accurately describe the target of the link. 


<a href="feedback.html" 
title="Send us feedback about 
our site"><img 
src="feedback.gif" 
alt="Feedback" /></a>

Alt Tag Text Should be Meaningful:

The general rule when using images on a web page is to provide an alt attribute in the image code and to provide the same information which visual user sees. This is called "providing an equivalent experience.

Below is an example of the MIMINAL coding that was used in this image. This example would not be very accessible. 


<img src="CALSlogo.gif"  
alt="College logo" />

If the image is a logo which represents your unit on the page, it is not enough to just say: 


alt="College logo"

This alt tag would "pass" various accessibility tests, but obviously this tag is not providing an "equivalent experience". So a better alt attribute would be below. Its text adequately conveys the information displayed in the graphic. 

alt="College of Agriculture 
and Life Sciences at 
The University of Arizona"

Your alt tag doesn't need to describe everything in the image; it would be nearly impossibly to accurately depict a picture for the unsighted. Your tag merely needs to convey the information that you intended the image to convey. A good test to determine if a text equivalent is useful is to imagine reading the document over the telephone. What would you say to make the image understandable to someone who is listening to the description but can not see the image?