Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Currently, my webpage images use the alt attribute only.
Users complain that their IE8 cannot show the "tooltip" bubble when they mouse over the image. On Microsoft's What's New in Internet Explorer 8 page, it says

The alt attribute is no longer displayed as the image tooltip when the browser is running in IE8 Standards mode. Instead, the target of the longDesc attribute is used as the tooltip if present; otherwise, the title is displayed. The alt attribute is still used as the Microsoft Active Accessibility name, and the title attribute is used as the fallback name only if alt is not present.

I also found that many say title should be used.
Which should I use to meet the industrial standard: alt, longdesc or title?

share|improve this question
1  
The alt attribute doesn't produce a tooltip in any browser except IE7 and earlier. –  w3d Dec 18 '12 at 9:20
add comment

2 Answers

up vote 0 down vote accepted

Many CMSes place that content in both the title and the alt attributes, but those attributes do have different semantic meanings. Whereas title is explicitly meant to be used for tooltips, alt is (a) what's read to visually impaired users, and (b) what gets rendered if the image doesn't load for some reason. If you're only going to write one piece of text and duplicate it using jQuery, I would write it for the alt attribute and copy it to the title using the following jQuery code:

$().ready(function(){
    $('img[alt]').each(function(){
        $(this).attr('title', $(this).attr('alt'));
    }
}

Be sure to modify the img[alt] piece if you don't want to apply this change to every image on the page; for instance, use #content img[alt] to only apply it to descendants of <div id="content">.

The decision to use alt over title in your HTML is based on three factors: first, accessibility is important, and you can't rely on Javascript being enabled; second, it sounds like you already have alt attributes in place; third, the tooltip in this case is a nonstandard user request you may want to disable in the future, but the images should still have that text associated with them even if you do.

share|improve this answer
add comment

Title attributes in <img> tags are what show up on mouse over by default. I would use the title attribute or use a jQuery plugin to create nicer tool tips on mouse hover.

share|improve this answer
1  
The jQuery plugin should still be based on the title attribute in order to be accessible. –  w3d Dec 18 '12 at 9:21
    
@w3d what are you talking about? "The jQuery plugin" using title attributes should still be based on the title? This one certainly doesn't craigsworks.com/projects/qtip/demos and i'm sure others are similar. –  Anagio Dec 18 '12 at 9:51
    
The title attribute is the accessible way to provide a tooltip cross browser. Any enhanced JavaScript tooltip can go way beyond what the meagre title attribute can provide but all I'm saying is that this should still be used in conjunction with the title attribute in order to be accessible. The jQuery plugin you link to can be used with the title attribute and it is only truly degradable (listed as one of its features) if the title attribute is used. –  w3d Dec 18 '12 at 10:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.