Demonstration of the LONGDESC attribute and the "d" link

When images are provided to illustrate complex ideas, the same information MUST also be provided in an accessible form. Consider the following graphic:

Usage by Country for June 2002d

In this case, the image (a .PNG file) would be generated on the fly from information stored in a database (or in this case a log file) which is constantly being modified. None-the-less, because the basic information that is being displayed is originating from ASCII text, by using the LONGDESC attribute we can provide the same information as text for users and user agents who cannot extract the information from the image.

 Code Sample:  <img src="ctry_usage_200206.png" style="width: 512px;
height: 300px; border: none;"
alt="Usage by Country for June 2002" longdesc="ctry_usage.html">
<span style="font-size: 1pt; color: White;"><a href="ctry_usage.html" title="Link to a description of the image">d</a></span>

You will notice that I have also included an invisble "d" link as part of the code sample. The "d" link is not part of any Standard, but is a recommendation from various Accessibility Advocacy groups for users who cannot or have not yet upgraded to newer technologies. The "d" link is intended to mirror the functionality of the LONGDESC attribute for non-visual browsers, and is a nice backwards compatability feature.

Here, I have broken two rules in that I am using a fixed font size of 1 pixel and I have set the font colour to the same as the background colour, but it is done intentionally so that the link does not "show up" on a GUI browser since the "visibility: hidden" attribute of CSS is not properly supported in older browsers. However, it will still be present for screen reading technologies as well as text only user agents that do not support Style Sheets.

<< Back to More Examples © 2002 - Bytown Internet - All Rights Reserved [bytown internet logo]