Chapter 34. Making Images More Accessible

Conscientious Web designers make their Web sites as compatible as possible with accessibility tools such as screen readers, text-to-speech converters, and text-to-Braille converters for the benefit of the visually impaired.

Making HTML text accessible is easyyou do nothing whatsoever. Accessibility tools are smart enough to ferret out the text on the page and turn it into spoken words or Braille. However, the technology does not yet exist for these tools to examine the content of an image and render an accessible description. It falls to you, the Web builder, to write these descriptions yourself and embed them in the HTML for screen readers and the like to find.

You put the description in the alt attribute of the img tag, like this:

[View full width]
 <img src="/books/2/30/1/html/2/neptune.jpg" width="300" height="150" alt="An image of the planet Neptune as  seen by the Hubble Space Telescope. The face of Neptune appears cobalt blue with faint  bands of blue-gray cloud."> 

TIP

As a value-added bonus, as the marketing department might say, some search engines specifically look for the text in the alt attribute to catalog your site more accurately. Therefore, supplying intelligent alt text may help your site to rank higher in search results.

Notice that the description doesn't skimp on the details. The idea is to give the visually impaired a comparable experience of the image. That is, you want to convey the same information in your description that the picture provides visually. Therefore, when you add alt-text descriptions to your images, pretend you're writing a novel. Make your description conjure the image in the mind's eye.

In the preceding example, you find that the text does a pretty good job of conveying the visual information. You wouldn't want to give a description like this:

 <img src="/books/2/30/1/html/2/neptune.jpg" width="300" height="150" alt="The planet Neptune"> 

Few would dispute the accuracy of this description, yet it doesn't have enough detail to conjure the image of Neptune in the mind's eye. Visually impaired people who hear this description already have to know what Neptune looks like to have a comparable experience of the image, which puts them at a disadvantage, since the image itself makes no prior assumptions. Someone who has never seen Neptune before can look at the image and learn what the planet looks like, so your text description needs to do the same thing.

TIP

Be sure to give text descriptions for all the images on a page. Purely functional images, like logos or buttons, don't need detailed descriptions: "About Us button" or "Home Page button" do the trick nicely. But definitely give very detailed descriptions for illustrations, charts, graphs, and other content images, or images that add to or expand upon the text on the page.