How to Create Accessible Graphics

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

The "alt" attribute

One of the biggest accessibility problems on the Web today is the lack of alternative text for graphics and images.  Individuals with visual impairments often use screen readers or refreshable braillers that read the text on the page to them.  When these assistive technologies come across an image, there is no text for them to read to the user does not get the same information that someone with sight would get.  Fortunately, there is an easy fix for this problem. The HTML <img> tag provides a way to add alternative text through the "alt" attribute.

Let's look at an example. 

The image is of the University of the Antarctic logo.  The HTML code for this image is:

<img src="../tutorials/uofa/images/map_antarctica.jpg" width="150" height="117">

When a screen reader comes across an image with no alt attribute, there are a couple of things that could happen.  One, it could simply skip the image as if it were not even on the page.  Two, the screen reader would find some text that is associated with the image such as the file name and read that instead.  This means that the user misses the image content completely or gets some text that may or may not be useful to them.  Let's listen to a recording of the screen reader IBM Home Page Reader 3.0 reading the image.

Select a format: Wav | Mp3 | RealMedia | Transcript

Someone using a screen reader would have a difficult time knowing what the image was for.  So we need to add a text alternative to the image.  To do this we simply put alt="University of the Antarctic logo".  The HTML source would then look like this:

<img src="../tutorials/uofa/images/map_antarctica.jpg" width="150" height="117" alt="University of the Antarctic logo">

Let's listen to Home Page Reader 3.0 reading the image again so we can see the difference.

Select a format: Wav | Mp3 | RealMedia | Transcript

As you can tell, the addition of alternative text, or an alt attribute, allows users who are visually impaired to get the same information as someone who could see the image. 

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Top of Page || Return to Tutorials List