Image Tags

ALT - How do I add tags to my images?

The first step to make your pages accessible is to include ALT attributes for images in your Web page. This makes your page more usable for visually impaired users and for people who browse the Web with images turned off. Normally, to include an image in a Web page you would use HTML code like this:

<IMG SRC="tower.gif" HEIGHT="200" WIDTH="320"/>

But for people who use screen-reading programs, this code offers no text for the program to read. The guidelines require the use of an ALT attribute for the IMG tag:

<IMG SRC="tower.gif" ALT="University of Texas Tower" HEIGHT="200" WIDTH="320"/>

When a screen-reading program encounters this code, it reads the text in the ALT attribute. Although visually impaired users won't see the tower picture, they will know what's there. This is particularly important when your graphics include links to other sites.

Do I really need the ALT attribute for every single image? YES

If the image is a non-essential image, you still need to have the alt attribute, otherwise the screenreader will speak the name of the image. For example, if you had three spacer.gifs in a row, a person listening to your web page would hear "image, spacer.gif, image spacer.gif, image spacer.gif". The only appropriate alt for a non-essential image is alt=""There is no space between the quotes.

<IMG SRC="spacer.gif" ALT="" HEIGHT="1" WIDTH="1"/>
Most web content management systems will have a tool available to assist with the insertion of ALT attributes so that you do not have to edit the HTML directly; these tools generally make the adding of ALT attributes quite easy while you are in the process of uploading new images.