Validation vs. Code Bloat in Regards to Alt Text

What about spacer gifs? Will alt="" trip up spiders?

[martinibuster]

It's a soap opera that has me in a tizzy.

I've decided to pay as much attention to validating as I do to making sites that look good and function cross browser.

My issues:
1) I use rollovers because people love to get tactile with the buttons and watch stuff glow... Alt text here? Ok, Accessibility issues requires it.

2) I use spacer gifs in places (generally near the copyright footer) because NN 4.7 likes to squish things together otherwise. Use alt=""?

3) Does alt="" trip up spiders?

4) In the quest to validate by cleaning up this alt tag situation, am I not bloating my code just a bit?

5) Are there other issues I've missed?

[Nick_W]

Hi

alt="" isn't really code bloat. You should use it on every image that does not require a description.

If you could see your site in Lynx you'd be amaxed at what not doing that looks like (stick me your link and I'll mail you a snapshot).

It will not trip up spiders.

As for nn4 and spacer gifs, just use padding or margin, you may have to experiment but it can certainly be done quite easily.

Nick

[ciml]

What Nick wrote. The code bloat is not significant, IMO, when compared with image load times and latency. If you don't like the ToolTips in IE then title="" rids them (not Nav4 but the Web isn't beautiful in Nav4 anyway).

[papabaer]

.... right!

And the savings to be had by using CSS in place of spacer.gifs (uhhh! cold chills!) more than makes up the difference.

Don't hestitate to validate! ;)

[luma]

Read Use of ALT texts in IMGs [ppewww.ph.gla.ac.uk] for in-depth information on the topic.

For example, see the little red icon on the thread title? It's 979 bytes. Moreover it's not just the image that gets transferred, there's also meta information transferred with each image. If you can afford the image, you can afford the alt text.

[Ranger]

So then alt="" is definitely what to put for spacer .gifs?

I assume putting alt="keyword" could draw the ire of search engines, or that alt="space" wouldn't be good because it could draw attention to otherwise 'blank' spaces should someone mouseover that spot?

[Nick_W]

Think of it from a text or screen readers point of view. After all, that's what alt text is for ;)

alt="spacer" is so useless it's not even amusing.
alt="keyword" is asking for trouble :)

Nick

[fathom]

Actually try not to look at this as alt="keyword", but more from the page theme perspective.

also as ciml has pointed out the title="" is a valid element according to W3C standards and in Google it carries much more weight than "alt".

title elements can be used in spacers and images, dynamic objects (e.g. flash and shockwave files) links, tables and divs to define what specific areas of a web page are.

[martinibuster]

With Google "title" carries more weight? You mean title="keyword" vs. alt="keyword"?

[fathom]

correct

[papabaer]

Use the "title" attribute for added accessibility and reward yourself with relevant keyword placement at the same time. Do ensure that you use "alt" and "title" appropriately, understand that while hidden <div>'s may trigger red flags - alt and title are valid. Their use is even encouraged.

[martinibuster]

Is it redundant to use both alt and titles or is it an either/or proposition in regards to having valid code?

[tedster]

One of the most powerful ways I've found to use the title attribute is in the anchor tag where it describes and reinforces the keywords of the TARGET page. Given Google's focus on links, I think this is the most powerful place to use title=

So my approach puts an alt attribute in an <img> tag, and a title attribute in the anchor tag. The W3C reference on title attributes [w3.org] allows for titles on other elements (including img) - but they also suggest checking each element to see if it allows a title attribute.

Here's a page from Microsoft about the title attribute [msdn.microsoft.com]. At the bottom they list all the elements that can validly take a title.

I just spotted blockquote on that list. Hmmmm...that gives me a few ideas.

<added>
I'm sure that abuse and keyword stuffing of the title attribute would lead to it's being devalued by search engines. But intelligent and appropriate use can give you a leg up on other sites, and be an aid to your visitors, without risking future troubles.
</added>

[papabaer]

Is it redundant to use both alt and titles...

No, they are seperate attributes serving different purposes. The alt attribute as we all know, is meant to provide a description of the image it is assigned to. While the title attribute provides a means to describe an element's content in detail, enhancing accessibility.

<a href="local_daily_news.htm" title="Read the local daily news items for Anytown, Wisconsin.">Daily News</a>

By the way - using title tags for anchors is extremely useful when size restrictions prevent full descriptive links.

<dl title="The following list contains names and contact information of the Northwest Chapter of Ducks Unlimited">

<dt title="Chapter President">Bob Smith</dt>
<dd>Blah, blah, blah...</dd>

<dt title="Chapter Vice President">Shelly Connelly</dt>
<dd>Blah, blah, blah...</dd>

</dl>

<div style="float:left;width:200px;height:auto;padding:5px;border:1px solid #666;" title="Quotations taken from content of the June 17th meeting of the Northwest Chapter of Ducks Unlimited">
<p>Blah, blah, blah... - Bob Smith</p>
<p>Blah, blah, blah-blah! - Gunther Hagstrom</p></div>

Remember, as sighted individuals, it is far easier for us to understand association of content that may not be so apparent to those accessing a site using a screen reader or Braille browser. Froma a coding viewpoint, look at it as adding comment tags that provide coders with a roadmap if you will... The principle is very similar.

Intelligent use of the alt and title attributes is a win/win situation.

- papabaer :)

[ann]

Hi,

How abot using title= in the header tags?

Ann

[papabaer]

Hello Ann, the title in the header element is a unique element to the page while the title attribute may be assigned to indvidual page elements.

A tag refers to the opening and closing tags used to construct elements.

<p> or <div> alone are appropriately called "tags." While <p>now I am an element!</p> is a completed unit properly described as an element.

To put something "in a tag" would be to describe attributes:

<div title="this is an attribute!">Enclosed by two valid tags, I become a complete element!</div>

[ann]

Thanks papabear,

but I am a still a little confused.
You closed the <P> tag and it became an element that could not support the title attribute then you used it in the <div> with the title= and closed it......What's the difference?

Ann

[papabaer]

Hello Ann, regarding the paragraph element example... a title attribute can easily be used.
I was only pointing out the difference between a tag <p> and an element <p> </p>.

This is a META TAG: <meta>

This is a META ELEMENT:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Here is a paragraph (element) with a title attribute used to describe the content:

<p title="A brief explanation of the benefits of the title attribute.">The title attribute should be used to give a brief description that would aid surfers using aural or braille browsers. Sighted surfers do not really appreciate how much information their vision can process when scanning a page. It is much easier for a sighted person to "quick scan" to the section of a page that most interests them. Visually impaired surfers can accomplish much the same if title attributes are used. The brief description in the title attribute helps non-sighted viewers quickly find items of interest.</p>

[ann]

Thanks a bunch.

Now I understand. :)

By the way, what is the coreect way, if allowed, to put a keyword in the <H1> tag or am I misunderstanding.

I have read how search engines give added weight to the header tags and I wasn't sure if they contained keywords for that effect or if they are weighted in a stand alone <H1>manner<H1>

You can probably tell I haven't used those tags very much>>>:0

Ann

[Nick_W]

I think that might be overdoing it just a tad ;)

Nick

[countrycat]

Another thing to remember about ALT text with images:

NN 6 doesn't display ALT text on the page while the image is loading. That's always been a good way for people to glance at the image/link and decide if they want to wait or jump to another page.

But NN 6 does support the TITLE attribute for images and links. And it degrades gracefully in older browsers. From a usability standpoint, the TITLE attribute makes sense.

And as for using images to create rollovers, I've had good luck creating the same effect with CSS. Now, that often looks awful in NS 4.7 browsers, but I get less than 3% of visitors using them.

I define the A:link, A:hover, etc. in an external style sheet and then all I have to do is include the links in the BODY. Presto! A nice navigation menu with no image files, no image swapping, no JavaScript.

[KMxRetro]

Somebody mentioned CSS spacers earlier on, in place of spacer.gifs.

Does anyone have a good, cross-browser compatible example of the code required to insert a 1-pixel CSS spacer image?

[Nick_W]

Well, there's no such thing really. You need to use padding and margin on elements.

If you have 2 divs and want 1px space between them you might do something like this:

.yourdivs {
margin: 1px;
}

It's probably not such a good example as I don't know your situation but maybe that helps just a little?

Nick

[richlowe]

The question I ask myself before adding anything to a web page is "does this help me communicate?" If the answer is yes, then it's likely to be included (there are other considerations). If the answer is no, then it should not be included.

Does ALT and TITLE help communicate? Yes, even "" can communicate by indicating the image is NOT necessary for understanding the page.

Richard Lowe

[KMxRetro]

Thanks Nick_W, that's just the job!

[electro]

I'm with countrycat on the rollover thing. The dead simple way to get a rollover effect without all that preload nonsense, miles of javascript etc is to use gif images with clear patches where you want the roll over effect to happen. Then, just set the gif in a table with a background colour. This is the 'up' colour that will show through the gif. Then, just add a CSS class to the link.

 <a class=h href="../somewhere else.htm">
<img src="the_image_with_holes.gif" alt="Snappy Description"></a> 

And the little bit of CSS:

a.h:hover { background-color: #FFFFFF}

And your done. Look over at alistapart for a full explanation. Note that this effect works best in IE5 up, half works in Mozilla and doesn't work at all in NN4.x (surprise surprise!)