HTML img tag: title attribute vs. alt attribute?

Question

I was browsing Amazon and I noticed that when searching \"1TB\" if you hover the mouse cursor over the stars rating image, you only see the score if using IE. If you are u

Answer 1

They are used for different things. The alt attribute is used instead of the image. If the image can't be shown, and 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 to do.

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

The ALT attribute is for the visually impaired user that would use a screen reader. If the ALT is missing from ANY image tag, the entire url for the image will be read. If the images are for part of the design of the site, they should still have the ALT but they can be left empty so the url doesn't have to be read for every part of the site.

Answer 4

You should not use title attribute for the img element. The reasoning behind this is quite simple:

Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.

Source: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 includes general advice on use of the title attribute:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to apear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Source: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

When it comes to accessibility and different screen readers:

• Jaws 10-11: turned off by default
• Window-Eyes 7.02: turned on by default
• NVDA: not supported (no support options)
• VoiceOver: not supported (no support options)

Hence, as Denis Boudreau adequately put it: clearly not a recommended practice.

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" attribute is the correct one to show the tooltip with a title for the image.

Answer 6

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