Skip to main content

30 steps to a more accessible website

Step 21: Ignoring Spacer Images

Many designers use transparent spacer images to control the layout of their website in visual browsers. You may use as many as you like, but you need to explicitly specify an empty alt attribute on each spacer image so that non-visual browsers know to ignore them.

Who benefits?

  1. Marcus benefits. By default, Lynx displays the filename of any image that does not contain an alt attribute. Many popular weblog templates include several spacer images even before the site name. You don't notice them in your visual browser, of course, but this is what Marcus sees:
[shim.gif] [shim.gif][shim.gif][shim.gif]Welcome to my website[ciblueHeader2.gif][ciblueCurve2.gif]
  • Jackie benefits. By default, JAWS reads the filename of any image that does not contain an alt attribute. If you thought Marcus was annoyed, imagine how frustrating it is for Jackie to hear this:
  • graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif welcome to my website graphic c i blue header two dot gif graphic c i blue curve two dot gif
  • If you introduced yourself like that in real life, nobody would talk to you.

How to do it

Things not to do

  1. Don't define alt=" " . The alt attribute should be an empty string, not a space.
  2. Don't specify an alt attribute on your <body> tag, even if it defines a background image. This background image is always ignored by non-visual browsers. It looks like this:
  • <body background="http://url/to/image.gif">
  • Don't specify an alt attribute on <td> tags, even if they define background images. These background images are always ignored by non-visual browsers. They look like this:
  • <td background="http://url/to/image.gif">

Further reading

« Step 20: Providing a summary for tables | Contents| Step 22: Using real lists (or faking them properly) »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1