Technique: Floated image with text-link

This rather simple HTML technique produces a floated discretionary image link, in addition to an in-line text link within running text. The technique works by including, within the scope of a single anchor link (A) element, not only the desired link text, but also an IMG specifying an ALIGN attribute of LEFT or RIGHT as the case may be. The benefits, relative to having separate links to the same destination from the image, and from the in-line text, are several. Let me stress the point that this technique is for an image whose specific purpose is to offer an alternative link to a resource which is anyway linked from the running text. The image is meant to be visually intuitive to those who are browsing in graphical mode, but would represent a pointless distraction to a text-only reader.

For regular text-mode readers, the image can be made to disappear entirely, by using ALT="". Since the image is not standing alone within an A element, and its disappearance is not depriving a text-mode reader of any content-based functionality, the construction passes both the letter and the spirit of accessibility checks, indeed it is functionally equivalent to the second example in the WAI techniques section 6.1.1.

As of Sept 2002, this page failed the test at the "Bobby" accessibility checker, on the basis of having empty alt text within a link. Bobby threw the same error report, in fact, when it was offered the cited example of good practice from the W3C WAI's techniques document! After a couple of attempts to call this to the attention of the Bobby folks, and related discussion on their web forum, they accepted that it was a problem and said that they intended to fix it.
As far as HTML is concerned, the construct is only a single link, not two; those client agents which produce a menu of links on the page will only list the item once, not twice. By contrast, the provision of adjacent but separate links to the same URL would not only count as two links, but would also (justifiably) provoke Bobby into complaining about two links separated by nothing more than white space (currently rated as a priority-3 fault).
The technique falls-back with reasonable grace in the event of a client agent not honouring the IMG ALIGN attribute.

Even though ALT="" has been used in order to make the image disappear for regular text-mode readers, some text-mode browsers offer the reader the option to insist on having links for images (e.g the "*" keycommand in Lynx). The author may (and "should", if appropriate to the content) additionally supply TITLE and LONGDESC attributes for those who can use them. Support for these in mainstream browser/versions is far from ideal, but that shouldn't deter us from playing our part in the "WWW concordat": I'm assured that there are assistive-technology implementations that can make good use of them.

The technique uses only HTML, but doesn't seem to impact adversely on page styling being done in CSS.

The small picture shows a green Academic cap, a so-called "mortarboard".

Last changed Thursday, 14-Jul-2005 16:20:41 BST