Affecting the appearance of ALT texts and tooltips

This document is an appendix to Guidelines on alt texts in img elements and discusses the font face and size, color, background color, and duration of the display of those texts. One of the key problems is that if authors suggest a dark background, the ALT text may become illegible.

An ALT attribute itself has no color; the visual presentations of the attribute value have. This would be just nitpicking if there were not the problem that some visual browsers use that value for completely different purposes and in different ways:

• as a replacement text (alternative text), displayed when the image is not displayed
• as a "tooltip" text, displayed in a small popup box on mouseover.

Only the former corresponds to the defined meaning of the attribute. But here we first discuss the latter, partly because it is simpler in the sense that the appearance cannot be affected.

"Tooltip" appearance

The "tooltip" behavior for ALT texts, on browsers that have that feature, seems to be fixed in browsers that display the tooltips and cannot be affected in HTML or CSS. The tooltip text is typically in a small font, black color, light yellow background, and it stays there for a few seconds, then vanishes. To make it appear again, the user would have to move the cursor away, then back. The following example, consisting of a deliberately "broken" image (IMG element with a SRC attribute that does not refer to anything existing), illustrates how your current browser displays ALT texts:

If you, using a graphic browser such as IE or Netscape, move the cursor over the broken image above, you may see the browser's display of the ALT text. And the author cannot affect how it is displayed.

The "tooltip" behavior in general seems to be controlled by browsers' built-in routines, which are also used to display the "tooltips" corresponding to title attributes. It is often frustrating that the text is visible for a few seconds only, especially if the text is long or the user does not read very well. But the duration of the tooltip behavior seems to be fixed. The font size on the other hand can be changed by the user, at least on Internet Explorer: select Control Panel > Display Properties > Appearance > Item: ToolTip and select the desired font size (and face and color).

If you, as an author, want something essentially different from browsers' "tooltip" behavior for ALT, you need to use other techniques, such as a piece of JavaScript that opens a popup window. Depending on your browser and its settings, you might observe that a small window pops up when you move the cursor over the image on the left and vanishes when you move the mouse elsewhere. For a discussion of more advanced techniques, see e.g. Custom Tool Tips by Vlad Krylov. Such techniques may or may not work in a browsing situation, and they should not be regarded as alternatives to writing useful ALT attributes, just as an optional extra feature.

Appearance of the ALT text as a substitute for the image

When ALT text is used in place of an image, IE displays it in small font and along with a generic icon indicating 'image' or 'broken image', so it's similar to the presentation of the "tooltip" text - but there are some possibilities of affecting the appearance. On Netscape, the situation is similar except that the page's overall font face and size is used. On Opera, the presentation makes much more sense: just the text, in the normal text font, possibly affected by surrounding markup, is displayed, though there is a frame around the ALT text indicating its special nature.

The color of the replacement text might be affected by surrounding HTML markup, by CSS rules, and by the settings of user's browser, but there seems to be great variation between browsers. In particular:

• on Netscape 4, the color is the text color as set in the browser's settings (black by default), or globally for a document
• on IE 4, the browser's text color is used too, but this may be changed in HTML or in CSS, e.g. with <font color="..."><img ...></font> in HTML or with img { color: ... } in CSS
• on Opera 4, it's the same as on IE 4, but the font size and face can be affected, too.

The basic problem is with backgrounds, especially local backgrounds as set e.g. via <table bgcolor="...">. For simplicity we discuss background colors only; background images pose similar problems, and similar considerations apply.

The following illustrates what happens when the background is dark, assuming, of course, that your browser honors background settings in a document. We have some dark background and a "broken image" with different factors potentially affecting it:

	1: no attempt to set anything
	2: <font> markup trying to set text color to white
	3: CSS rule to set text color to white
	4: <font> markup trying to set text size to large (6) and font face to Courier New in addition setting color to white

On Opera 4, the text appears white in cases 2 - 4, and in large Courier New font in case 4. On IE 4, ditto, except that the font face and size does not change in case 4. And on Netscape 4, the text is black in all cases, except that in case 3 there is nothing to be seen! (This strange bug does not depend on the actual color suggested. And in fact, Netscape seems to use the ALT text of that image for another image on the page!)

Thus, on Opera, the color of ALT texts is is not a problem if you have just specified a coherent set of colors e.g. in body attributes or in CSS. (Although our examples above use various local ways of suggesting colors, global settings will do just as fine.) You just need to be careful: if you suggest a background color (different from the overall background color) for, say, a table, you need to consider how to suggest a matching text color as well, even if the table does not contain "real text", only images. The safest bet is to use CSS so that you always suggest background color and text color in the same rule; otherwise there's the risk that some unexpected CSS features, or browser bugs, make the browser apply just the background suggestion. On IE, the situation is basically the same. However, IE uses a small font for the ALT text and there doesn't seem to be a way to increase that, and small text white on black is more difficult to read than equally small black and white.

But then there's Netscape 4, which has many oddities. For example, if you suggest text color in HTML via <body text="..." ...>, it affects ALT texts too. But suggesting text color via CSS doesn't affect ALT text! So in order to take Netscape 4 into account, you should probably either suggest colors in the body tag or use some clumsy workaround locally, e.g.

<table cellpadding="0"><tr><td bgcolor="#ffffff"><img
src="..." alt="..."></td></tr></table>

That means putting the image into a single-cell table with the desired background color. That would fix things on Netscape in the sense that you can select a background against which the ALT text is legible. This would affect the esthetic appearance, though only when the ALT text is used; the background won't show through the image (assuming you've included the cellpadding="0" attribute).