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.
- 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
- Don't define alt=" " . The alt attribute should be an empty string, not a space.
- 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
altattribute 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">