Accessibilty Tips

Images and Accessibility

  All tips   

It is important to add alternative text to all images on your websites. The process may be a little different depending on the image. Below are the most common use of images and examples on adding alternative text to the images.

Adding Alt attributes to images

women's soccer game

<img src="images/soccer.jpg" width="220" 
height="165" alt="women's soccer game">

Five simple rules for adding Alt attributes to images

  1. If the image is eye candy for the website (if it depicts no necessary information) simply describe the image. Example: alt="kids playing baseball"
     
  2. If the image only contains text, simply write exactly what the text reads. There is no need to add any other text to the alt description.
    Good example: alt="programs"
    Bad Example: alt=“programs button" or alt="programs link"
     

  3. If the image is a spacer gif or provides no information (such as a bullet), simply use an empty alt attribute (alt=" "). Adding empty alt attributes allows a person using a text reader (or a text-based browser) to ignore images that provide no information. If you do not add an empty alt tag the text reader will tell the user that there is an image but will not provide any information about it. If you add an alt tag to these images, the text reader will read the alt attribute and might confuse the user.

    4. <img src="images/spacer.gif" width="20"
height="2" alt=" "> 
  4. If the image is artwork, you can credit the work and/or artist.
    Example: "Mona Lisa, painting by Leonardo da Vinci." or “post-modern sculpture by Marcel Duchamp”
     
  5. If the image depicts any necessary graphical information describe or explain it. If it seems to long to explain, you'll need to briefly describe the image through the alt tag and also use the LONGDESC attribute and a D link to describe the contents of the image at length. Read more about the adding LONGDESC attributes
     

Adding Alt Attributes to image maps

Remember to add alt descriptions to mapped areas of he image map as well as adding it to the image itself.

example:

example of navigation image map classes contact information 

<img src="images/imagemap.gif" width="212"
height="100" usemap="#navigation" border="0"
alt="example of navigation image map">

<map name="navigation">
<area shape="rect" coords="8,7,91,30" 
href="classes.html" alt="classes" title="classes">

<area shape="rect" coords="8,37,95,60" 
href="contact.html" alt="contact" title="contact">
 
<area shape="rect" coords="8,65,140,90" 
href="information.html" alt="information" 
title="information">

</map>

Adding Long Description

graph with coffee trends by 4 employees [D]

<img src="images/chart.gif" alt="graph
with coffee trends by 4 employees" 
longdesc="cupsCoffeegraph.html" width="286" height="180">

<a href="cups-coffee.html">[D]</a>

Note: For stylistic reasons you can replace the visible d-link with an invisible d-link by inserting a small transparent image, whose "alt" attribute is "D-Link" or "D," next to the content you need to describe. Like other d-links, it refers to a text equivalent associated with the image or non-text content. The invisible D-Link should not replace the longdesc attribute, only the visible D-Link. Notice on the image above that you can see the 'D' link. next to the image. You can click on the link to get a long description of the information depicted through the image.

Back to top