Practical Use of Longdesc as a Footnote

Apr 4 2005

As you may be aware, longdesc is an attribute of image tags which can be used to provide a description more lengthy than its alt attribute (as a rule of thumb, images with alt text > 150 characters would benefit from a separate longdesc). However, unlike an alt attribute, an image’s longdesc attribute (if used) specifies a URI linking to a separate page.

For example:
The XYZ Company

There’s only one problem with longdesc — various assistive technologies handle them differently:

There is variance in the way assistive technology handles LONGDESC pages. Some screen readers, Jaws in particular, launch the LONGDESC page as new window. The Jaws user has to know this and be ready to close those extra windows.

Now, if you’re thoughtful and add a “close window” link to the LONGDESC page, you run afowl the other screen readers that navigate to the LONGDESC page rather than open it as a new window. If they hit that convenient close window link you added, “poof,” goodbye session!

So, what to do? Well, Andy Clarke came up with a compromise — you can use intra-page links with longdesc to create longdesc references that are usable within both Jaws and other screen readers. So, an img tag might look something like this:


Then, it’s just a matter of defining an element with an id matching the longdesc reference (in this case, “footnote-1”) of which Andy points out that a definition list woudl be ideal for this purpose:

The Empire Hotel web site is designed in subtle tones
of mauves and purples and uses traditional patterns to reflect the traditional atmosphere of the hotel.

Back to Empire Hotel

Then, if desired, you can hide the “accessible footnotes” (as Andy calls them) from visual browsers. This is the trick of setting an element to position:absolute and then yanking it to the left by a couple thousand pixels (which pulls it off the screen). Though the full entry has more detail on the technique, the basic code is this:


position: absolute; font-size: 0; left: -1000px;


So, with the use of intra-page links rather than references to external URIs, longdesc can be usable for everyone. And, while it may be tempting to hide the “footnotes” from sighted users, they could be useful just as-is (existing as a normal definition list within the page). If your design accommodates it, longdesc-footnotes could be useful to everyone.

Leave a Reply