Web Design Garage

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="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="saturn.jpg" alt="Saturn">

This type of alt ...