Alt tags on spacer gifs

[dvduval]

I just ran an html validation checker on my page to discover that I had about 70 images that were missing alt tags. Many of these images are not really images at all, just slices produced from Photoshop. Would it be better to be 100% validated or might naming this many peices start to look or be spamy?

All comments appreciated.

[Marcia]

You can always use alt=" " (space in there), that way you keep the amount of code down and eliminate the errors for the missing alt text.

[martinibuster]

Use this: alt=""

It also helps the sight impaired so that they don't have to listen 70 times per page that this is a spacer gif.
;)

[papabaer]

alt="" is an option.

If your slices are complete "mini-pics," such as a group photo sliced to highlight individuals in the group, or a landmark or logo against a more general .gif background, I would use descriptive alt attributes for these specific "slices." All others could be served the empty alt="" attribute.

For truly marginal images I just assign the <div> slice, a CSS background-image and totally omit the image code from the page.

[edited by: papabaer at 1:30 am (utc) on July 22, 2002]

[pageoneresults]

You can utilize an empty alt to bypass the error. Yes, it would look spammy if you were throwing keywords in spacer alts.

alt=""

[pageoneresults]

Aw, come one, what is this. Don't you guys/gals have a life? (posts 1 minute apart) Marcia, you can eliminate the space between " ".

[edited by: pageoneresults at 1:45 am (utc) on July 22, 2002]

[Marcia]

pageoneresults, I like everything "pure"

Added: It could always have "bork" in there 70 times.

[edited by: Marcia at 1:37 am (utc) on July 22, 2002]

[pageoneresults]

> I like everything "pure"

Can you expand on that for me?

BORK? Acronym for Back Office Resource Kit.

[edited by: pageoneresults at 1:47 am (utc) on July 22, 2002]

[martinibuster]

I understand that the correct way to code it is to use alt="" without the space. Some browsers, may display an empty "tool tip".

I double checked it at the w3c.org [lists.w3.org].

[edited by: martinibuster at 1:53 am (utc) on July 22, 2002]

[pageoneresults]

One less byte of code too!

[Marcia]

I don't think I've used a spacer gif in 2 years, except for the left table once, about 600 px high (I called it "spacer") to keep the navigation text at the top of the table instead of it floating down to the center, but there are places it should be used instead of the DW blockquotes.

>For truly marginal images I just assign the <div> slice

What's that?

[pageoneresults]

> What's that?

Okay, I'll bite!

Actually, I've got a few designs that use remote rollovers with id spacers inbetween. What's a <div> slice?

[papabaer]

There are times when I will assemble a complex image set using <div>s to contain my "image slices." While the page may appear "graphic heavy" when rendered, I keep the code in check by only including the essential image slices as actual <img> elements. The associated image slices are displayed using CSS to assign background images to the other divs that comprise the montage.

Imagine a large image sliced into twelve segments: four of these comprise the essential elements of the image while the remaining eight are just filler background, though still relatively important pieces of the total image.

Say the four main slices were various automobile models and the other eight slices were segments of a "snazzy, artsy" background. I will keep the four images of the car model as <div id="car-one"><img src="car-model-one.jpg alt="2003 Car model one" title="The redesigned Car Model One is blah, blah, blah" class="c1" /></div> and the "filler background as: <div id="cm-s1"></div>.

The CSS for the "empty" divs might be something like this:

#cm-s1 {
position:absolute;
top:35px;
left:0;
width:132px;
height:24px;
background:url(cm-top-left-slice.gif);
}

#cm-s2 {
position:absolute;
top:35px;
left:133px;
width:90px;
height:24px;
background:url(cm-top-right-slice.gif);
}

#car-one {
position:absolute;
top:59px;
left:0;
width:180px;
height:135px;
}
.c1 {
width:180px;
height:135px;
}
img {
border:0;
}
And so on...

This way the page will only contain the actual code for the four main image slices while CSS will handle the rest. For the four main images I will also allow CSS to handle the border, width and height of the images.

This can also be used to assemble "chrome" for a GUI without cluttering the page code with the various image segments.

Alt and title attributes do NOT need to be assigned to background images AND, you keep the additional image code (which, in this case, is part of the presentation...) away from accessibility browsers.