Is your Web browser BAD?

'BAD' is an acronym meaning 'Broken As Designed'.

Recent versions of some Web browsers have implemented a common (often highly useful) feature - but, sadly, some have done so incorrectly.

What are tool tips?

Tool tips provide supplementary information to the user of a GUI (Graphical User Interface) system. In the case of a graphical control, the tool tip might provide "hints" as to its purpose; for non-button features the tool tip might simply provide a description. Used properly, tool tips can be extremely useful, particularly where the controls displayed are pictorial representations of their function, whose purpose may not become apparent until the user becomes familiar with them.

How do tool tips work?

Typically, if the user's mouse (or other pointing device) is held over an area of the display defined by a tool tip for longer than a predefined time, a small inset window will appear containing the tool tip text, giving the user more information about that area.

When the area in question is a button, the 'hint' thus revealed provides the novice user with further information as to the button's function. The expert user, on the other hand, should not be offered this visual distraction (since s/he will already know the purpose of the button). Ideally, the delay before the tool tip appears should be configurable, to cater for each user's individual learning curve.

Some technical HTML stuph

You don't need to know the technicalities in order to get to the punch line, but here they are anyway.

HTML - HyperText Markup Language - is the language used to describe a web page. A web author uses HTML to describe the structure of the information in a web document or 'page'. How that web page is presented to the viewer is up to the Web browser software to correctly interpret the marked-up information and render it appropriately within the viewer's environment. The web author must relinquish layout control to the browser, since s/he has no way of knowing each potential viewer's individual setup.

The standard way of marking up image information is to use HTML's IMG element, which has some mandatory attributes, and a number of optional ones, too. The ones we're interested in for the purpose of this discussion are the ALT attribute, which is intended to provide alternative textual content for display when the image is unavailable to the user agent, and the more recent TITLE attribute, intended for supplementary information.

The World Wide Web Consortium (W3C), recently clarified that user agents ('Web browsers' to you and me) should display a tool tip corresponding to an object's TITLE attribute - not its ALT attribute. Using HTML, a web page designer can then mark up the information accordingly, providing appropriate TITLE attributes - which should be rendered as tool tips if this functionality is present.

The Crux of the Matter

Recent versions of some popular Web browsers incorrectly display the contents of the ALT attribute as tool tips. When this happens, the functionality of the user interface is impaired, since the ALT information - crafted for a different purpose - when presented as a tool tip provides the reader with information which is nonsensical, or redundant, and creates an unnecessary distraction.

It is often difficult, if not impossible, to devise a single textual description of an image which serves as both

... this leaves the responsible web author in a very awkward position.

The only way forward is to

What can be done about this?

Until the browser developers acknowledge that their implementation is BAD, and agree to correct the flaw in a future release, web authors must struggle with trying to do the best of a bad (pun intended) job. Hopefully the fix will come before there is too much content in place on the WWW which relies upon the broken functionality...

You can help, by using the simple test below to determine whether the browser you are currently using is BAD. If it is, contact your browser developer to bring their attention to the problem - this might just help to solve this problem for the future, for all of us.

How to tell whether your Web Browser is BAD

The table below shows four images, each of which has been marked up using slightly different HTML; the four combinations of ALT and TITLE. If your browser shows tool tips inside web pages, simply point at each of these images and see whether a tool tip appears, and if so, whether it contains the correct legend ('Hurray!'). The behaviour the browser should exhibit is shown in the third column. The fourth column is for you to note whether your browser is "good"... or BAD: Broken As Designed.
Attributes used: Image: Correct behaviour: Actual behaviour:
None1
No tool tip Good BAD
ALT only This browser is BAD :-( No tool tip Good BAD
TITLE only1 Tool tip: "Hurray!" Good BAD
ALT & TITLE This browser is BAD :-( Tool tip: "Hurray!" Good BAD
1NB: this is technically invalid markup, since ALT is required for the IMG element in HTML 4
Note also that this test makes incorrect use of the ALT and TITLE attributes of the IMG element in order to demonstrate the problem, and in order to make sense, the images in the table need to be loaded! If you discover other browsers which are also BAD in their rendition of tooltips, please let us know the URL of their problem report page so that this can be included here.
Further reading:
Alan Flavell's excellent article about the Use of ALT text in IMGs.
Jakob Nielsen's Alertbox for January 11, 1998: Using Link Titles to Help Users Predict Where They Are Going
The W3C's Web Accessibility Initiative (WAI? Why not :)

Copyright © Email
http://www.tne.co.uk/bad-tooltips.html
Last modified: 14th February 1998 (yes, I did remember my better half)
 Validated HTML