Images / Tables / Flash

Images

One of the biggest accessibility problems on the Web today is the lack of alternative text for graphics and images. Individuals who are blind often use screen readers or refreshable Braille devices that read the text on the page to them. When these assistive technologies come across images without alt text, they are unable to communicate their meaning.

When a screen reader comes across an image with no alt attribute, there are a couple of things that could happen:

  1. It could simply skip the image as if it were not even on the page.
  2. It could find some text that is associated with the image such as the file name and read that instead.

The exact behavior of the screen reader varies between brands of screen readers and the circumstances of the Web page itself, but either way, the end result is undesirable. The user either misses the image content completely or gets some text that is probably meaningless.

Guidelines for alt text:

  1. Ensure that the text alternatives communicate the purpose of the graphic accurately and succinctly.
  2. Provide empty or null alt text for graphics which do not convey content.
  3. Provide alt text for both the main image and the hot spots of image maps.
  4. Do not repeat the alt text of an image in the adjacent text.
  5. Do not put important images in the background.

<img src="tmp.jpg" alt="This is an image place holder. " width="200" height="200" />

Images on Web sites are used in three main ways:

  1. to convey important content
  2. to provide visual enhancements which offer no real content
  3. to link to other areas of the site

The most appropriate alt text for an image depends on the way in which the image is used. In fact, the same image could be used for different reasons under different circumstances, and each instance of this image would have different alternative text.

Null alt text - Decorative images

The Web has become a graphical environment in which developers often add images to their pages simply to enhance the visual appeal of the site. For example, the image below could be used to form part of a rounded border on a page.

Images in this category do not provide any content to the user; they are simply used for decorative purposes. These images have no value to someone who cannot see the page. The proper HTML markup for this type of image is what is often referred to as an empty or null alt attribute, written as alt="". That is alt equals quote quote, with no space in the middle. The source for the image in this example would look like this:

<img src="tmp.jpg" width="200" height="200" alt="" />

Screen readers will ignore graphics with empty alt text, which is exactly what we want in this case. You may be wondering why it is necessary to specify a null alt text. Wouldn't it make more sense to simply leave the alt attribute off entirely? This is a good question, but the answer is that missing alt text is worse than null alt text because some screen readers read the file name of the image, which can be confusing to listen to. When you add null alt text, screen readers skip over the image without reading anything at all.
For more information on accessible images please visit WebAIM.org

Examples