These tests test whether one can replicate the @longdesc attribute — in all its splendour – by using image maps. The method was suggested by Steven Faulkner. An image map is a programmatic assocation of an img element with a map element containing links.

Reference: img@longdesc. The longdesc url is served via the longdesc attribute. There is no “backup” anchor link (in contrast to CSSsquirrel’s Comic #72, where there is an additional, hidden anchor element.)

Image map with area element + ARIA attributes: area@rel="longdesc" + ARIA

Image map with area element without ARIA attributes: area@rel="longdesc"

Image map with a element + ARIA attributes: anchor@rel="longdesc" + ARIA.

Image map with a element without ARIA attributes: anchor@rel="longdesc".

About the tests

In the anchor and area element tests, the link text has been set to “Press enter for long description”. This in order to mimic how JAWS presents @longdesc links — and to allow user to compare how @longdesc versus image maps. The similarity when using VoiceOver rather good, for the only test I could get to work — the anchor element + ARIA test. So, if you have VoiceOver and are curioius how @longdesc works in JAWS, you may get a glimpse fo that if you try that test. (Mimicing JAWS this way, is meant to help juxtaposing the results. As a ‘normal’ link text, though, then it isn’t particulary good.)

The goal of the tests is to show/test if it is possible — today — to create a long description link that draws as little attention from sighted users as the longdesc attribute itself does, while also remaining useful. Some inspiration and intial code are taken from CSSsquirrel’s funny Comic #72. The area/a elemens uses rel="longdesc". No user agents have any support for rel="longdesc" today (the could support it a little bit like JAWS support @longdesc today). Thus the presence of rel="longdesc" in the tests does not affect user agents or AT.


User agents tested:
Webkit, Firefox, Opera, Internet Explorer, Elinks, Links, Lynx, NVDIA, Jaws, VoiceOver
of course, @longdesc is a much simpler solution — much less code clutter. (Had I accepted to wrap the image in a anchor element, instead of using a hidden image map, then of course, we would have a just as simple solutions — in this particular test, I did not allow myself to do that, since the goal was to imitate @longdesc as much as possible.) An important point, though, is that in

Jaws handles @longdesc, but does not treat the URL of the longdesc attribute as a link, by which I mean that it does not list it amongst the links of the page (to begin with, Jaws tells the user how many links the page contins, and the @longdesc URL is not counted amongst these). Had Jaws counted also the longdesc URL as a link, then — as a result — Jaws would have informeds its users that the @longdesc test page has one more link than the sighted user could see. This could eventually be a point of confusion in communication with sighted users — so Jaws has a valid reason for this behavior. (This was comment to something @mattur said on Twitter.)

Since the img is wrapped in a blockquote element with a cite attribute, there are two ‘dark meta data’ links in use simultaneously. My day-to-day browser is iCab, and it has support for both @longdesc and @cite.

Media indenpendence:
@longdesc must be “turned on” in the browser, in order to work (but perhaps a javascript library could “bring it alive” as well — it is defined in DOM specs.). Thus @longdesc does not work well in “primitive” browsers, such as Lynx. It is easy to get something that works cross-browser with an image map. However, image maps also have several implementation issues — only with the help of ARIA attributes, was I able to make it work in VoiceOver, and then only when I used an a element — area elements did not work. (Thus, not only are we in dizzy land when we choose to use @longdesc — merely using area instead of a means that browser support — when screen readers and Lynx count – is not as universal as expected. The stylesheet for these tests focuses on media="screen" – thus in other media, the anchor link in the 3rd test, will show — which is also kind of the point.area links in image maps are quite easy to access in Lynx, Elinks and Links. And also when using Jaws with Internet Explorer. But some combinations, such as VoiceOver+Webkit and NVDA+Firefox, have problems hanndling the area elements in these tests — for them it is better to use anchor elements.


Note that the purpose of this test is not to document how well @longdesc is supported, cross-browser wise, but to explore ways to implement the the longdesc feature.

Well, why conclude ... ? But I believe rel="longdesc" could be useful. HTML should have @longdesc as well as @rel="longdesc" — with the same semantics. That would strengthen the understaning of both of them. These tests are a proof of concept. The first way to make use of the knowledge gained from these tests, could be to implement a javascript library that converted @longdesc links into image maps that more browsers could understand ... Thus, use @longdesc but convert into image maps when needed. Because, currently, neither @longdesc nor image maps fully works cross browser, so some workaround is needed.
Screenreader results
  1. VoiceOver with Webkit (Mac OS X 10.5) respondes very well on the use of ARIA. Put another way, it did not work at all without ARIA. But still, the anchor element test (anchor element inside a map element) worked. The @longdesc did not work at all. (The preciding sentences glossed over the testing I had to do before I managed to ‘break the ice’ with regard to VoiceOver ... )
  2. JAWS with Internet Explorer has decent support for @longdesc. But all of the other tests worked as well – someone more JAWS expert than myself, perhaps could tell which one works the best. Though, I think it is fair to say that @longdesc worked the best in this test.
  3. NVDA with Internet Explorer did not have @longdesc support, but worked well with the other methods.
  4. NVDA with Firefox was difficult, probably because of some image maps quirks in Firefox. First, @longdesc did not work. But even image maps didns. Turns out that in order to work, it was necessary to add @shape and @coords to both anchor and area element. Clearly a Firefox peculiarity. But even then it did not quite work, unless you activated the image map link via the mouse — something which weren’t the intention with the test. (May be a more full blown user of NVDA nknows how to activate the link.)

    A particular issue: HTML5 currently makes @shape and @coords invalid on anchor elements. Thus, to be HTML5 valid, even moore hoops would be necessary.

Text browser results
  1. Lynx, Elinks, Links only worked with both the anchor element tests and the area element tests!
Graphic user agents
None of the graphical user agents that I tested displayed any link for the image in these tests — in that sense, they all worked. iCab, however, supports both @longdesc and @cite. Thus we can say that, for iCab, the @longdesc test was what worked best. The same can be said about Opera, which also supports @longdesc.

In a summary, implementing @longdesc without @longdesc, is difficult. However, once microformat and some best practises is worked out, it could work.

Leif H Silli, 2010 August. Updated 30th of August 2010.