DHTML Lab - DHTML Diner - IE4: Toggling TITLE Value Display

Toggling the Display of TITLE Values

Background

The ALT= Attribute
We are all familiar with the the ALT= attribute of the IMG and AREA tags. We have used it to provide alternate text content in case the image encounters an error in loading, or the user has image display turned off in their browser. For example, the image (or lack of) on the left, is created by the HTML on the right:

<IMG SRC="nonexistent.gif"
WIDTH=150 HEIGHT=100 BORDER=1
ALT="Picture of Peter Belesis">

The ALT= attribute should describe the missing image. In this way, users with non-graphical browsers or with image display turned off and users using speech synthesizers can still be aware of the page layout and display.

The ALT= Attribute as Tool Tip
Internet Explorer 3 introduced a new use for the ALT= attribute: pop-up tool tips. If you are using Explorer, pass your mouse over the images below, placed in the page with the HTML immediately following:

<IMG SRC="../diner.gif"
  WIDTH=150 HEIGHT=71 BORDER=0 ALIGN=LEFT HSPACE=30
  ALT="DHTML Lab Diner Logo">
<IMG SRC="nonexistent.gif"
  WIDTH=150 HEIGHT=100 BORDER=1
  ALT="Picture of Peter Belesis">

You should have seen tooltips like these:

In other words, you saw tool tips that alerted you to nothing that you didn't already know. The ALT= attribute as tool tip is redundant and intrusive. In order for the ALT= attribute to display "meaningful" tooltips, its value must be "advisory" and not "descriptive." It must provide additional useful information related to the tag, or instructions, or the like. For example (pass your mouse over images):

<IMG SRC="../diner.gif"
  WIDTH=150 HEIGHT=71 BORDER=0 ALIGN=LEFT HSPACE=30
  ALT="Click to return to Diner front page">
<IMG SRC="nonexistent.gif"
  WIDTH=150 HEIGHT=100 BORDER=1
  ALT="Something you will never see">

The above examples give these results:

In the first case, the tooltip is useful, since we see the image and are provided with additional information. In the second case, where no image is displayed, the tooltip is confusing, since it only makes sense if an image is displayed.

Verdict: Explorer introduced an enhancement to the ALT= attribute that is only useful if we do not use the ALT= attribute as intended. Navigator 4 also adopted this behavior for ALT=, although it is "sticky" (doesn't always work).

The Standard
The HTML4 specification defines the ALT= attribute in this way:

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.

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. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

• Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
• Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

HTML4 Spec

Therefore, ALT= has now been expanded to be used with INPUT and APPLET (not yet implemented by any browser) and should only include alternate descriptive text! Using ALT= for tooltips after you have been using it for description is like destroying an already-built wheelchair ramp, thus hampering access that already existed.

For those of us who love tooltips, HTML4 introduces the TITLE= attribute.