Alt text is an alternative, not a tooltip

It seems like there is a bit of confusion among many web developers and browser vendors surrounding the use of the alt attribute to provide alternative text for images and other non-textual elements.

In alt as a tooltip, Anne van Kesteren points to a document on the Channel9 Wiki site that contains feedback about Internet Explorer Programming Bugs. The alt attribute (yes, It’s alt attribute, not alt tag) and how it is displayed by Internet Explorer is discussed in the “Browser Behavior” section. Several people point out that Internet Explorer is wrong in displaying alternative text as a tooltip while also displaying the image.

They are all correct. Unfortunately, judging by the response from one of the IE developers it seems Internet Explorer will continue to display alternative text as a tooltip. But it shouldn’t do that, and most definitely not in a way that is visually similar to how properly specified (by using the title attribute) supplemental information is displayed.

From the HTML 4.01 Specification chapter 13, Objects, Images, and Applets:

The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text ). User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

I don’t see how this can be interpreted in any other way than “alternative text should never be displayed at the same time as the image it provides an alternative for”. Joe Clark seems to agree:

You get the image or the alt, but not both. It isn’t open to interpretation.

Here are a few of other resources that repeat this message:

Some argue that browser vendors should be free to display the alternative text as a tooltip if they want to. I don’t agree. Browsers (with Internet Explorer for Windows being the only one still developed) violating the spec by displaying alternative text as a tooltip has led to widespread misuse of the alt attribute. If Internet Explorer stopped doing this it would lead to better alternative texts in the long run.

Only use the alt attribute to specify alternative text. If you want to provide supplemental information that browsers may choose to display as a tooltip, use the title attribute.

Posted on April 10, 2006 in Accessibility, Web Standards

Comments

  1. In order to get IE to behave correctly, use an empty title-attribute (ie title=”“) when you don’t have anything to say in it.

  2. I agree. For development purposes the ability to display the alternative text in some way is quite useful, but a simple User Stylesheet which displays some generated content can easily solve that problem for developers (assuming that nobody uses IE for anything else but to test if things work in it).

  3. Hey Roger, you love the alt ‘tag’ don’t you! Heh. I agree totally on this. Because IE is displaying the alt attribute as title, many web developers misuse the alt attribute to add extra information for the image, this means there is no alternatve information for those not seeing the image.

    It also leads to some people asking why the validator complains about alt attribute on div or anything else! Perfect example of people not understanding the correct use or alt/title because of bad vendor implementation.

  4. Having access to the alt attribute even when images are enabled can help people read tiny 9 pixel height text some designers tend to love. I think it’s a good idea to give a way to access alternative text even when images are enabled, but tooltips everywhere gets too often in the way because they pop-up whether you want them or not. If they added a contextual menu item called “Show textual equivalent” that could display an help bubble it would be quite right.

  5. I think the key is in the description, ALT i.e. alternative. Seems to have been missed.

    Alternative: al·ter·na·tive (ôl-tûr’nə-tĭv, ăl-) pronunciationn.

    1. The choice between two mutually exclusive possibilities.
  6. I agree on the fact that al text should be used as an alternative to an image, not in conjunction (its called “alt text” so how could it literally be anything other) - however, I would use it in conjunction with an image to provide further information on mouse over if need be. Maybe I shouldnt - maybe I should use the title attribute? Would that be better for all browsers, and is that semantically the correct use?

    If you dont use either of these things and want more information about an image on the hover over it (which is perfectly plausible) - what do you do, implement an expensively heavy javascript tool tip?

  7. I had this ‘discussion’ with a business enterprise representative just recently. It really is shocking that people supposedly educated to advise companies on their web prescence haven’t the first clue as to the correct nomenclature to use, or the ‘varying’ results between browsers rendering of web pages - and which is correct.

  8. Stu - you should use the title attribute for supplying more information.

  9. Lar: thanks for the description of alternative, but the spec actually says alternate (there’s a difference).

    So, allow me to build my strawman argument: what should we do about any feature a browser offers that isn’t part of the spec, even if the feature offers helpful functionality? Who cares if IE renders alt as a tooltip? How is this in any way damaging? Oh, people might abuse it? Yeah, guess what, they’re abusing the rest of the spec, I think the alt attribute is the least of our worries.

  10. I totally agree and thank you for the roundup.

    Now that we know what the alternate text is intended for, I’d like to point to a great ressource by Ian Hickson on how to write them.

  11. @Jonathan:

    How is this in any way damaging?

    I will admit to have abused it in the past. For example in an image map where a non-hotspot region displays in IE (because of the tool tip behaviour) instructions on where to click in the image map. These instructions were not alternatives to the image but additional information not clearly described by any other means. I am not the only one to have done this.

  12. What really conserns me is that some web developers, due to the fatal mistake made by the IE dev’s a few decades ago, thinks that alt is used to diplay tooltips not only on images, but all over the place. On form elements, links, you name it. I shit you not, I’ve seen it been done.

  13. I am in a class this semester at school, required for my major, that they teach basic HTML, CSS, and XML, all things taught and graded using IE. I’ve been doing this stuff for years now (not necessarily well) and have often had to correct my teacher. I tried to correct him here - he too said that the alt attribute was used to show tooltip text - but he wouldn’t listen.

    I would never have believed that people actually did this had I not experienced it myself. Thanks for bringing it to people’s attention.

  14. April 10, 2006 by zcorpan
  15. IE’s behavior bothers me to no end. I was working on something recently in which I wanted to have a title on a link, and of course alt text on an image. To my surprise, IE’s bug decides in favor of an alt tooltip, over the title attribute, which actually is supposed to be a tooltip! It’s so frustrating how Microsoft just makes up their own rules, and tries to strong-arm people into following them.

  16. Talking about usability and backward compatibility, Netscape treated the ALT tooltip the same way as IE does.

    So, yes, accepting the standard in this case means you are not backward compatible. I call that blindly following.

  17. April 10, 2006 by Roger Johansson (Author comment)

    trovster: Hehe. I figured if I write enough articles about the alt attribute maybe I can get at least a few people to stop calling it “alt tag” ;-D.

    Stu: Yes, that’s exactly what the title attribute is meant for.

    Jonathan: Well, people abusing the rest of the spec doesn’t make using the alt attribute for tooltips right, does it? Displaying alt text as tooltips encourages people to misuse it. That is damaging to the people who rely on well written alt text.

    zcorpan: Hmm. That link leads to a login form. Is the link correct?

    dusoft: How exactly is using the alt attribute correctly not backward compatible?

  18. No, that’s not the argument I was making. I don’t think it ‘encourages’ anything. The problem is that there’s a behaviour based on usage and that behaviour then becomes abused by people who are not aware of its intentions or what other browsers do with said information. Forcing IE to NOT display the tooltip isn’t going to solve the problem. “Oh, you mean now I have to use ‘title’ to display a tooltip? Cool. let me get rid of that silly alt text and put it into the title”.

    The answer is education.

  19. How exactly is using the alt attribute correctly not backward compatible?

    It breaks people’s expectations, because nothing is shown on hover - even plain users are quite used to hovering over images to see some text (more info). If the browsers breaks this custom, then lot of old websites are not shown properly and also people could be confused.

  20. Jonathan,

    The problem is there’s only a limited number or words that can efficiently carry a certain meaning. I think it’s necessary to keep the meaning of alt as described by the spec and in this article.

    If because of wrong usage we change the meaning of alt in the spec, then alt means title, so what does title mean ? And there is no end.

    So to me it’s really not that pedant of a fight. Alternate text cannot have a new meaning.

    Forcing IE to NOT display the tooltip isn’t going to solve the problem

    “Forcing” is not an option, but I do think developpers would start changing, just like they started abandonning table layouts. Some won’t, but they are wrong. They may keep being wrong, but those who start with the spec and with good tutorials will find it logical and much easier.

  21. dusoft,

    You should define what backwards compatible means to you.

    If it means behaving like 5 to 8 year old browsers that have a broken implementation of the standards, you’re right.

    But in regards to the spec that would just be fixing a broken implementation.

    lot of old websites are not shown properly and also people could be confused

    Like developers care about that! Look at the state of usability and accessibility on the web. The change you dread would actually be a good thing in that respect.

  22. Sébastien: I never said that alt shouldn’t be used for its intended purpose. Actually, I said quite the opposite: The answer is education. The alt attribute should be used for its intended purpose. But declaring that IE should not display it as a tooltip isn’t going to solve the problem.

  23. Thanks Roger. Another issue relates to the folk who add important information and explanations in the ALT attribute - no-one navigating by keyboard gets any of it (nor the title)!

  24. Nice you wrote about it. Using proper attributes and tags is so a simple issue that education should make many webdevs switch onto it quickly. Talking about attributes always reminds me of my ‘favorite’ lack of attribute - tabindex, that is very annoying for the user :/

  25. jakub: Tabindex, in many situations, will make life MORE difficult for users who are using the keyboard (or other device that presents links and forms serially, eg. scrrenreaders) as their primary navigation method.

    The default tabindex follows source code order- keep your source code in a logical format and there won’t be an issue with tab order.

  26. April 11, 2006 by Roger Johansson (Author comment)

    If the browsers breaks this custom, then lot of old websites are not shown properly and also people could be confused.

    As far as I know, the only reasonably recent browser that does display the alt attribute as a tooltip is IE/Win. If the IE developers feel that they absolutely must have their browser continue doing this, they should change the display to make it clear that the text really shouldn’t be displayed. Perhaps adding “Alternative text:” to the tooltip would do. Another option is using that silly image toolbar that appears when you place the cursor over an image. Maybe they could use that to display the alternative text.

  27. The default tabindex follows source code order- keep your source code in a logical format and there won’t be an issue with tab order.

    You’re right Michael, f.ex. I don’t have to use tabindex, but when the code of popular websites is old and in most cases with tables, the better solution is to order the jump with tabindex. In these cases, with or without, the code isn’t very accessible, but so the most part of visitors don’t get crazy.

  28. I’m sure Microsoft just thought adding the tooltip would be helpful. But it isn’t. In fact, it’s worse than not helpful, it’s frankly harmful. What bothers me the most about this behavior is that the end result is designers and coders not using alt attributes when they’re needed the most. A common scenario is to use a graphic of a word (“search” or “send”, for instance) as a link, rather than regular text. As long as an alt attribute is included, this is fine, no serious accessibility issue here. But frequently, after seeing that IE’s tooltip obscures their beautiful graphic or simply presents “redundant” information, they remove the alt text entirely. So this very useful attribute, designed to increase accessibility and usability of the web ends up being used less, especially in the most useful places, than it would have if IE wasn’t so “helpful”.

  29. April 12, 2006 by Johan

    what if you combine alt=”” and title=”” in <img> tags

  30. Title takes precedence over alt when displaying tooltips in IE.

    If you set both, the title is displayed. If you set an alt and a blank title, then no tooltip is displayed.

  31. Great article. I think an article I recently wrote might go hand-in-hand with this one nicely. Forgive me if posting the link is not appropriate. http://green-beast.com/blog/?p=81

  32. April 13, 2006 by Roger Johansson (Author comment)

    Mike: Thanks. Your article is a great complement to this one, so your link is most appropriate :-).

  33. A related discussion:

    Prevent IE treating alt attribute as a tooltip:

    http://www.volkanozcelik.com/cre8/blog/2006/01/prevent-ie-treating-alt-attribute-as.html

    Telling my step by step walk to the light side, where I was almost enchanted by the mysteries of the dark. ( where

    dark side may be defined as: “Don’t give a ** to accessibility, everything can be sorted out with JavaScript, easy peasy.”

    and light side:

    “Seek for the simplest solution. It may not be easily seen and you may deviate from the truth by your ‘so called’ elegant solutions. Just look for the simplest one. ‘Cuz simplicity most of the time goes hand to hand with perfection.” )

    Cheers.

  34. I like to have alt for my images(but of course I wouldnt’t have it any other way) and a title for example in my smilies. Sometimes the image might not be clear what you’re trying to show. I noticed that in deviantart.com and I felt that it was a good idea since sometimes with the mirade of smilies I didn’t know what the author was describing.

  35. I agree that the alt and title attributes are broadly misused.

    For me the most important thing is to keep the end user in mind, whether they are using a text browser are able bodied, blind or partially sighted.

    I don’t understand the IE is poor so I’m not going to code for it mentality. IE is still the most widely used browser so it hurts users rather than IE to not code for it.

    To access the broadest audience and help most users I specify both alt and title attributes in my coding.

  36. September 12, 2006 by Ghodmode

    To use the alt attribute of an image intending to create a tooltip is bad practice on the part of the developer, but I can’t blame this one on MS.

    To blame MS for this poor practice and state that they need to change it suggests that they should continue to guide Web development practices. If we look to the W3C recommendations first, we would use the title attribute when we want a tooltip anyway.

    Carefully examine the language of the quote from the spec above.

    It says that “User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.”

    It does not say that user agents may not render alternate text as a tooltip when the image is displayed.

    — Ghodmode

  37. March 8, 2007 by spellchk78

    Those of us charged with full compliance with Section 508 of the Americans with Disabilities Act must use the ALT attribute for images so screenreaders can ‘read’ the image.

    IMO that a particular browser renders the attribute in a way with which you disagree is irrelevant to matters of usability.

  38. April 20, 2007 by a proofreader

    The one benefit of IE displaying alt attributes is that it makes it easy to check to make sure the alt text is correct. Unfortunately, I don’t work on a PC and I use Safari to check digital work. Is there a tool or a plug-in that anyone knows of to make this process easier than digging through code??

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.