How to use alt attributes and make sure IE does not use them as tooltips?

Our website has a graphical main menu (i.e. text is done in image editor then displayed as an image), but whenever I hover over the menu item, it will display a tooltip. (e.g. when I hover over "Contact Us", another "Contact Us" pops up as tooltip)

My web designer said this is necessary to let search engine index the menu text, but it seriously makes the presentation ugly -- is there no way to avoid the tooltip yet still let the search engine inde开发者_开发技巧x the alt attributes?

The alt attribute is required in the img tag. It is there to provide information to those who are unable to see the image. This may include the visually impaired (perhaps using a screen reader), those using a non-graphical browser, or those with images disabled. In cases where the image is purely for formatting, the alt attribute should be set to an empty string (alt="").

The alt attribute is not supposed to be rendered as a tooltip. As far as I know, Internet Explorer for Windows is the only browser that does this.

The title attribute "offers advisory information about the element for which it is set". It is not required, and should only be used in situations where it provides additional useful information not already present in the element for which it is set. The title attribute is commonly rendered as a tooltip in graphical user agents (browsers).

See The alt and title attributes for more information.

Your graphical menu could be designed in one of many ways, so it's hard to say what, if anything, could be changed. What you need to consider is:

• The accessibility of your navigation menu to those who do not see the site in the same way as you do. Is it possible to navigate your site in a text only browser such as Lynx? What happens if you turn images off? What happens if you turn stylesheets off? Turning images off is probably quite rare now, and is a tricky one to handle - it's a judgement call.

• Is it an alt or title attribute that is causing the tooltip to be rendered? If it's the former, then those fortunate enough to be using a proper browser won't see the tooltip.

• Is it really a problem in the first place? Considering the possible accessibility issues that could result from removing it, does it really matter?

• Search engines are designed to find content that is useful to people. If your site doesn't make sense when viewed in a text-only browser, it probably won't make sense to a search engine. Design your site for people, not search engines.

The tooltip message coming from the alt attribute only shows in IE and the only way not to show it is not setting it (bad idea).

All other browsers show the tooltip with the title attribute, as it shoud be.

Yes there is. You can use image based menus and still put text in them just hiding it. There are different techniques for this, this link shows several of them:

http://css-tricks.com/630-css-image-replacement/

And not only it will help search engines index the website but is friendlier to screenreaders (e.g Blind people visiting your website).

If your menu text is standard, i.e.,

• about us
• contact
• products
• etc

Then forget the alt/title tags. You will get no real value from search engines indexing these.

Of course, alt tags on images should be added for accessibility.

If this is a real issue, one thing you could do is place the images as background-images in a div/divs. Then add title or name attributes to the divs.

the alt attribute is text that is definitely required for accessibility and SEO purposes. IE, as usual, is wrong and uses that text for a tooltip as well. If you don't want tooltips, set the proper attribute, title to be blank ala title=""

However, as others have stated, the better solution is to not use images at all. You can style text quite easily these days with CSS. It won't require alt attributes, won't produce tooltips, allows for the user to more easily resize it, is easier to edit, and will load faster for the end-user.