Longdesc implemented as an image map.

In principle the code looks as simple as this:

<img src=img usemap=#desclink alt=ShortDescription >
<map name=desclink >
  <area href=longdesc alt=LinkText rel=longdesc />

However, because of imperfect and varying image map implementations out there, ARIA comes to rescue in this test example. First the code:

<!-- (1) The span element makes voiceover read the alt text of the image.
Yes. Meaningless. VoiceOver/Webkit must improve.-->
<span role=img aria-labelledby="this" ></span>
<!-- (2) Specal image maps issue: without border=0 (or CSS)
then IE displays a blue border.-->
<!-- (3) <img aria-labelledby="this"> was necessary
because [fill in later - I forgot which UA],
and the aria-label="" was needed for that reason: the content of @alt would
not be picked up by the "ARIA scraper" -->
<img border=0 usemap="#map" src="quote.gif"
aria-labelledby="this" id="this"
alt="ShortDescription" aria-label="ShortDescription" />
<map name="map" >
<!-- (4) Webkit needs @title, NVDA needs @alt (forgot if someone *needed* @aria-label)-->
<!-- (5) If rel=longdesc is registered, then @target isn't needed.-->
<area rel="longdesc" href="longdesc.html"
alt="linkText." title="linkText." aria-label="linkText"
target="_blank" />

Then the actual test: Something to keep in mind for the examples is that charts and graphs are not usually interchangeable with data tables so they don't usually make good long descriptions.Press to activate.

Some deprecation advantages to using image maps + @longdesc in combination rather than nearby link + @longdesc

Some advantages of area elements versus @longdesc:

Advantages of the map element versus nearby anchor elements:

Advantages of #usemap and rel=longdesc versus @aria-describedby

Other advantages

Common ground with the suggested @aria-describedby approach