The alt attribute is NOT for tooltips

I’m am so tired of the never-ending misunderstanding of the alt attribute versus the title attribute.

IE’s harm on the world

Internet Explorer up to version 7 incorrectly displays the value of the alt attribute as a tooltip when you hover an image. This has led to numerous web developers thinking that alt is supposed to be used for tooltips, and has in turn led to customers, managers et al believing so too, hence incorrectly using the term for when they want a tooltip displayed.

There are still hundreds of thousands of web pages out there built on that the alt attribute will act as the tooltip. These will only work in Internet Explorer, not in Firefox, Safari, Opera or any other web browser.

The alt attribute – how it should be

Start by reading the W3C specification:

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally.

The name of the attribute, alt, is short for alternate. That means it should be display if the image fails to load, not otherwise.

The true tooltip attribute – title

If you want do display a tooltip, you should instead use the title attribute. That will work for basically any element in a web page, too, not just image elements.

Microsoft has backed down

With Internet Explorer 8, Microsoft has finally backed down, acknowledged this as a bug, and fixed it. So for anyone depending on the alt attribute, you need to reconsider, since that will not even work in IE 8.

The difference, once again

The alt attribute is there as an alternative to the image.

Tooltips, via the title attribute, is there to complement what you see.

Got it? Please, please say yes!

Posted in Developing,HTML5/HTML/XHTML,Technology,Web browsers |

22 Comments

  • The problem is that without DOM prototypes and other standard features it is truly difficult to fallback with compatibility (IE5 to 7)

    An unobtrusive but expensive workaround could be something like:

    <code>

    attachEvent("onload", function(){

    for(var a = document.getElementsByTagName("a"), i = 0, length = a.length; i < length; ++i)

    if(!a[i].alt && a[i].title)

    a[i].alt && a[i].title;

    setTimeout(arguments.callee, 5000);

    });

    </code>

    but again, adding stuff like this to IE will simply mean to make the slowest browser even slower so I do not agree that much about these kind of workarounds. In few words, we cannot fix IE backward, it is better to go on and let user update their browsers, imo.

  • sorry, this after the if …

    <code>a[i].alt = a[i].title;</code>

  • Andreas says:

    Nice that they've finally fixed it.

    @Andrea – But your fix would turn all the title-attributes into alt-attributes if I'm not mistaken – how would that fix it? The problem isn't that IE _doesn't_ display title-attributes, it's that it _does_ display alt-attributes.

    Also, I think that code should be running on img-elements rather than a-elements, but I guess that's just a typo.

    I suppose instead just removing all the alt-attributes in IE would "solve" it, but I for one can't be arsed to put in workarounds for that browser anymore…

  • @Andreas, that is a fallback for users expecting tooltips over links or images (as you spotted) … which means we write W3 code but IE6 or 7 users will still read the tooltip.

    It does not matter if it is an IE error, they expect the tooltip over the link. So, accordingly, I am more for "no more tooltips? just change browser" rather than "impossible or expensive" fixes. got my point?

  • Yes!

    Been saying it for years, myself.

  • I am sure it's going to come back to haunt me, but I think that with IE8 maybe Microsoft has finally seen the light and in a few years, the web will be a nicer place.

    It shouldn't be too hard for Microsoft to update IE7 and IE6 with this behaviour as well, but I guess that'll never happen … EVEN if they admit it being a bug.

  • icaaq says:

    Great post Robert!

    Another thing regarding the title-attribute is the "Supplementing link text with the title attribute"-issue.[1] That's when the same text appears in the link text and the title attribute. A very annoying thing I see quite often.

    1. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081

  • David Naylor says:

    Dude, you're preaching to the choir! :)

  • Robert Nyman says:

    I thought you'd agree. :-)

    Andrea,

    Yeah, I've seen some people using <code>alt</code> attributes on links, believeing it will be a tooltip. Hiwever I agree with the stance that if you have, you have to fix the code – no extra script to cover up for that.

    Morgan,

    Oh, man, that will haunt you! :-)

    icaaq,

    Great point! That surely has to be stopped too, and most commonly I see that as part of the core of some CMSs. Horrendous!

    David,

    Yeah, yeah, I know… :-)

  • mdmadph says:

    Wow — I had thought they'd never get that one fixed.

  • Robert Nyman says:

    mdmadph,

    Yeah, me neither. :-)

  • Diego Perini says:

    The ALT attribute, also wrongly used as stated, is actually very useful on AREA, IMG and INPUT elements. It is part of the specs.

    It should aid textual UA to render alternate content and so said, to have a mean to reach visual impaired users with speech etc…(and for the other uses you already mentioned, less important).

    We don't have to ditch useful things having a real scope, we need to ditch our habit to use whatever comes easy in a wrong but seemingly useful way, it will not last long !

  • Robert Nyman says:

    Diego,

    Oh, absolutely! The <code>alt</code> attribute is indeed useful, as long as it is used the way it is meant to be.

  • Robert Nyman says:

    Alejandro,

    Good! :-)

  • [...] Je vous propose ici une traduction de l’article de Robert Nyman, sur la mauvaise utilisation de l’attribut html ALT. Pour les amoureux de la langue de Shakespeare, l’article original est ici. [...]

  • Ken Whitley says:

    If you're not checking your website for functionality with images disabled, you aren't even TRYING for accessibility, and may as well admit that it's of no concern to you and your employer.

  • Mark Williams says:

    I noticed that image tooltips were missing in IE8 and Firefox for all web pages I had designed. I then realised I had only specified alt attributes instead of title attributes!

    Having a portfolio of hundreds of Web pages I was faced with the time-consuming task of adding title attributes to applicable images. Thankfully I stumbled upon a Windows application called Alt&Title that did this tiresome task for me!

    Instead of spending hours manually adding title attributes, Alt&Title did it for me in minutes.

    Give it a go. I hope you find it as useful as I have!

    Here is the web page promoting it…
    http://www.flysoftware.com/products/altandtitle/o

  • Robert Nyman says:

    Mark,

    Nice, thanks for the tip!

  • What is wrong in displaying ALT content as tooltip if there is no TITLE attribute? Instead of thinking about ‘stick with syntax’ think about ‘usability’

  • Robert Nyman says:

    Mohan,

    Because it’s not the same thing. The value in the ALT content is supposed to be alternative, i.e. what you would say to describe the image if you can’t see it, whereas TITLE is complementary.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>