Imagine your online photo album, full of pictures of smiling cousins and sweeping vistas. Now block all the images from the page and what do you have? A lot of little, meaningless squares or blocks that say [IMG_3820.jpg], and so on. Now you know a little bit of what millions of Web users with disabilities experience every day. The remedy for this and other multimedia situations is really easy to implement.
The “alt=” tag
The alt= tag appears in the image, area, applet, and input tags in HTML. You can use it to add a short description of what appears on the screen. It should be standard practice for you to add an alt tag to any meaningful image, area, applet, or input device. If you are using a program to create websites, it should allow you to add alternative text or a caption to images or objects you add to your page. Good alternative text is short and to the point:
alt=”Photo of the Smith family at Jo’s graduation from Columbia, 2008″
When should you use alt text?
- Meaningful images
- Multimedia displays such as mpeg or flash
- Images used for form buttons
- Areas in an image map
- Applets that provide important information (ie scrolling alerts)
When should you NOT use alt text?
- Avoid using alternative text for design elements. For example: You choose to use a red ball rather than the standard dot for unordered lists. The UL tag will render the information in a list format. The red ball isn’t necessary to understand that this is a list.
- Don’t use alt text for invisible graphics. If you use 1 or 2 pixel gifs to nudge the text one way or another, do not add descriptive text. Instead, use an empty space (” “) or, better yet, use Cascading Style Sheets.
- If you use an applet to add falling snowflakes to the screen or trailing stars to the mouse, don’t add alternative text. It’s pretty and fun for viewers, but really is just for visual aesthetics.
The “longdesc=” tag
The longdesc tag is used in a similar way, but allows you to be much more descriptive. While there is no limit to the amount of text you can put in the alt tag, conventional wisdom says to keep it short and meaningful. If the image or applet deserves a longer explanation, use the longdesc tag to link to a separate file:
img=”image.jpg” alt=”monthly sales chart” longdesc=”monthlysales.html”
In that monthly sales page, you can go into great detail in describing the sales chart. Who sold how many widgets? Who is the sales leader? Did green widgets outsell blue ones? And so on.
Alternatively, you can make sure that the text above or below your image describes the information you wish to convey. Amend your alt text thusly:
img=”sales_oct.jpg” alt=”Monthly sales chart for October. Details in following paragraph.”
Want more? Visit the Web Accessibility Initiative’s section on alt text at http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G95 and WebAIM’s Appropriate Use of Alternative Text at http://www.webaim.org/techniques/alttext/ (which we found incredibly informative and very easy to read).