The latest tip in Mark Pilgrim's 30 days to a more accessible weblog series is to use an empty ALT attribute on spacer images so non-graphical browsers will ignore them.
In my mind, spacer GIFs, which are transparent 1x1-pixel images that some Web designers use to achieve precise positioning of elements on their pages, are a severe bastardization of what HTML was intended to be. Images are meant to add pictures and graphics to your Web pages -- not to push your text over 155 pixels to the right, to set up an adequate margin. (That's what style sheet properties are for.)
But aside from that argument, spacer GIFs have a terrible effect on text-only browsers. (This is Mark Pilgrim's main point.) Since a text-only browser can't display images, it displays the ALT (alternate) text for images in their place. Thus, a page with lots of spacers might look like this in a text-only browser:
[spacer][spacer][spacer]
[spacer]
[spacer][spacer][logo]The Anytown Daily News
[spacer]
...
Not pretty. If the above example had used blank ALT attributes, all of those annoying [spacer]s wouldn't have shown up.
I examined the code of several large newspaper Web site home pages to see how rampant spacer GIFs were. Here's the bad news:
nytimes.com used 103 spacer GIFs, all without ALT attributes. I visited their site with a text-only browser and was met with an ugly sea of [spacer]s. It's clear that text-only browsers are not welcome at The New York Times.
washingtonpost.com used 36 spacer GIFs -- significantly fewer than the Times, but worse, for the following reason: Each spacer image was specifically designated as ALT="spacer". If they cleared these ALT values, they'd make their pages look a lot cleaner in text-only browsers, and cut their home page's load time.
cnn.com used 48 spacers, but they got it right -- each one had ALT="". Nice.
latimes.com used 0 spacers. Instead, their spacing needs were handled by style sheets. Outstanding. CORRECTION: Style sheets handle a part of their spacing needs, but Todd pointed out that the page does indeed use spacers -- 87, in fact. Some have ALTs, some don't.
usatoday.com used 94 spacers. Like nytimes.com, none of them had an ALT attribute. Poor.
chicagotribune.com used 86 spacers. These were all over the map. Some had ALT="", others had ALT="spacer", and still others had no ALT attribute at all.
Comments
Posted by Rob on July 8, 2002, at 6:44 p.m.:
Circa 1998, I was all about making sure my sites were accessible. Since then, however, I've become lazy. This is something I'm trying to be more vigilant about. I take comfort, though, in at least knowing that every spacer GIF I've ever used (and I tend to use them a lot) has had an empty ALT value. And that's just on my personal sites. I know I obsessively ran the front page of idsnews.com through HTML validators many times in order to ensure that the code was tight and efficient. I would have hoped major newspapers would do the same thing for their front page -- a page that is obviously going to be the most-viewed page on the site -- at least.
Posted by Adrian on July 8, 2002, at 7:45 p.m.:
Very cool. Yeah, it's easy to be lazy -- not only with ALT attributes, but with using end tags, proper nesting, etc. Fortunately the validators exist to keep us on our toes. I used to use spacers as frequently as the next guy, but now it's come to a point where I just plain don't want to bother because style sheets make it so much easier.
Posted by Mark Pilgrim on July 8, 2002, at 10 p.m.:
Re: "spacers are evil". Yes, I wholeheartedly agree, but the fact remains that they do not pose an accessibility problem (with proper alt attributes, of course). 5 levels of nested tables are also evil, but many Radio and Manila templates have exactly that. Those who are ambitious can try re-arranging the table cells to present their main content first; the rest can use "skip navigation" links. Accessibility problems solved; beyond that, you're only hurting yourself. :) When I started this series, I promised myself (and my readers) that it would not degenerate into "your HTML coding style sucks, everyone should follow the holy grail of standards and CSS". It's been very difficult to stick to that, especially when my research involves digging into those damn Radio templates or similar messes and saying "this is OK, all you have to do is make one small change ... *cringe* here." Sometimes web standards improve accessibility (like using real headers, day 26), but other times they don't matter one way or the other. Bleah.
Posted by Adrian on July 9, 2002, at 6:06 a.m.:
I can imagine it's been tough sticking to that. Your work has been a great public service, and your messages ring true even beyond the world of bloggers. One thing I'm trying to accomplish here is to promote your message to the online journalism world. Keep up the great posts.
Posted by Todd on July 10, 2002, at 9:43 p.m.:
Maybe I'm missing something, but when I view the source code at latimes.com, I see many, many (I stopped counting at 70, and I wasn't even half way through the file) instances of . Some of which have alt="", and some of which don't. This would make them as bad as everybody else.
You weren't just looking for the word "spacer.gif", were you?
Posted by Todd on July 10, 2002, at 9:46 p.m.:
Whoops, didn't note your comment about cutting out HTML. The above is supposed to read "instances of <img src="/images/empty.gif">
Posted by Adrian on July 10, 2002, at 10:38 p.m.:
By golly, you're right. I don't know how that slipped by me. Thank you, and I apologize for that.
The stylesheet spacing that I did see a lot of was the <TD class="spacer5"> </TD>, etc. They use that pretty heavily at the bottom of the page, under "Section Headlines." Looks like they use stylesheets to add space between lines in that section of the page, but otherwise they use spacers.
Comments have been turned off for this page.