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"/>

Adding ALT attributes for images in Dreamweaver and FrontPage

As more people use authoring tools to create Web pages, following the guidelines becomes more challenging. Most authoring tools were not designed to make it easy to add ALT attributes to the IMG tag. For example, in Microsoft FrontPage, it's easy to insert an image (simply choose Insert and then Picture). However, to specify an ALT attribute, you must right-click on the picture, choose Picture Properties, and then find the text box for Alternative Representation in the Picture Properties dialog box.

Macromedia Dreamweaver makes it a little easier, but it still can be hard to find the small ALT text box on the Image Properties dialog in Dreamweaver. Fortunately, the W3C is working on Web Authoring Tools Accessibility Guidelines to improve this situation.

Flash and Other Multimedia

Macromedia Flash has new accessibility features. See the training available at Web Aim for Accessible Techniques for Flash. Audio and video also require special treatment to accomodate accessibility. See the webaim online tutorials on captions techniques for more information.