Making Images Accessible

You probably already know how to provide text equivalents for images, even if you don't realize it. All you need is the alt attribute of the img tag. This attribute is what defines the popup text caption that appears in the browser window when you hover over an image with the mouse pointer. Accessibility tools use the alt attribute to describe the image for the visually impaired.

So, to make an image accessible, simply give it a detailed alternate description, like this:

 <img src="/books/2/30/1/html/2/saturn.jpg" alt="A photograph of the planet Saturn from the Voyager space probe that shows the planet's giant rings and orange bands of cloud."> 

Don't cheap out on the text, like this:

 <img src="/books/2/30/1/html/2/saturn.jpg" alt="Saturn"> 

This type of alt label is only useful to people who don't need it. Remember, you want to give your disabled visitors an equivalent experience, so your words should come as close as possible to conveying the essence of the image. Pretend you're back in Lit class writing fiction. Give your audience enough information to form a clear mental picture of what you're describing.

For clickable images, try to put something in the alt text about what happens when your visitors click, like this:

 <img src="/books/2/30/1/html/2/aboutus.jpg" alt="Go to the About Us section of this site."> 

or this:

 <img src="/books/2/30/1/html/2/macromedia.jpg" alt="Go to macromedia.com."> 

If your alt text just says "About Us" or "Macromedia," your visually impaired visitors have no context for what the image means or does. By throwing in the action word to describe the result, you render the visual context obsolete. The meaning or function of the image comes through loud and clear in the description alone.

FAQ

What about images that contain text? Are they accessible?

Not as such. Sometimes, an image contains built-in text; for example, the label on a button or the captions in a diagram. However, a screen reader doesn't perceive the letters and words inside the image, so it can't render this text in a more accessible form. Be sure to provide alt text for these images, too.

Another accessibility no-no as far as images are concerned: Don't design flashing, blinking, jiggling, strobing, or otherwise visually annoying graphics, like some of your least favorite banner ads. Not only are these images aesthetically ugly, psychologically insulting, and conceptually crass, they also promote eyestrain and headaches for people with sensitive sight, and can actually induce seizures in people with epilepsy. If you're so desperate for click-through that you're willing to create a physical hardship for some of your visitors, perhaps you'd be better suited for a job in the marketing department.