HTML img tag: title attribute vs. alt attribute?

Question

i was browsing Amazon.com and noticed that a search such as a "1TB" hard drive:

http://www.amazon.com/s/ref=nb_ss_gw?url=search-alias%3Daps&field-keywords=1TB

if we move the mouse over the rating "stars" image, we will only see the score of it if we are using IE. If we use other browser like Firefox, Chrome, Safari, Opera, then the score won't show.

a rating of 3.8 or 4.2 both show up as 4 stars, but will you agree that if I buy something, whether it is 3.8 stars or 4.2 stars (76% vs 84% score) could make a difference?

That's because the standard way of "alt" text being shown is such as when the user turned off graphics or when the browser is a "read out" browser for users who are visually impaired. IE shows it anyway when the mouse is over the image. Other browsers follow the standard way and not show it.

so I think if Amazon is to show it regardless the user is using IE or Firefox/Chrome/Safari, then "title" should be used in addition to "alt", would you agree?

Update: ah yes, should have said using <img alt="3.8 stars" title="3.8 stars" ... > instead of just using "alt".

Answer 1

No, I think alt is better because the purpose of that attribute is to provide "alternate" text in the event that the image cannot be view (whether it be that the image is missing or that the browser itself is incapable of displaying it).

Answer 2

I'd go for both. Title will show a nice tooltip in all browsers and alt will give a description when browsing in a browser with no images.

That said, I'd love to see some stats of how many "surfers" out there going to a "store" to browse merchandise actually have images turned off or are using a browser that doesn't support images. I think the days where 90% of the population is using a 28k modem to connect to the InterWeb is looooong over.

Answer 3

In my opinion should the alt text always describe what is visible in the picture, for the case that the image is not displayed.

alt = text [CS] For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

w3.org

Answer 4

They are used for different things. The alt attribute is used instead of the image. If the image can't be shown, or (I believe) in screen readers.

The title attribute is shown along with the image, typically as a hover tooltip.

One should not be used "instead" of the other. Each should be used properly, to do the things they were designed t odo.

Answer 5

That's because they serve different purposes and they both should be used not just one over the other.

The "alt" is for what you guys already said, so you can see what's the image it's all about if the image can't be displayed (for whatever reason), it also allows visually impaired people to understand what's the image about.

The "title" tag is the correct one to show the tooltip with a title for the image.

Answer 6

I believe alt is required for strict XHTML compliance.

As others have noted, title is for tooltips (nice to have), alt is for accessibility. Nothing wrong with using both, but alt should always be there.

Answer 7

alt and title are for different things, as already mentioned. While the title tag will provide a tooltip, alt is also an important attribute, since it specifies text to be displayed if the image can't be displayed. (And in some browsers, such as firefox, you'll also see this text while the image loads)

Another point that I feel should be made is that the alt tag is required to validate as an XHTML document, whereas the title tag is just an "extra option," as it were.

Answer 8

The MVCFutures for ASP.NET MVC decided to do both. In fact if you provide 'alt' it will automatically create a 'title' with the same value for you.

I don't have the source code to hand but a quick google search turned up a test case for it!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }