Progressive enhancements with “longdesc”
I just received this comment today by Ruth and when I read it, I thought, yeah, why not. “longdesc” as the name says provides a longer description to supplement the alt attribute of an image.
When I first thought about the problem, my first inclination was to provide a hidden div that held the long description which became visible whenever the image it corresponded to was interacted with. The solution seemed intriguing but I had another thought toying with me at the back of my mind. What if all these browser developers soon came up with a standard solution on dealing with longdesc (we can always hope, it keeps the world moving). Then my solution would be redundant. So, I decided to go the old route, that is by keeping the longdesc in, but providing progressive enhancements.
Now, we move on to accessibility and that apparently oft misused “long description”. So, if, for every image on every website, we have to create an extra page to “provide that extra bit of description” – that does not seem to be 100% accessible. Just exactly how many people understand their “back button”.
So, wouldn’t it be “novel” if a JQuery component were to be built that allowed, at the press of a specific key, a small online window to pop up (kind of like a tool tip I guess) – that displayed the relevant “long description” information…
Well, that might not pass the W3C tests. But. It might, if all the information for every image on a website was contained on one htm page and, each “snippet” of info was then brought into the little opening window. Get my drift?
Thoughts?
So, here I came up with a very basic example that reads the longdesc attribute on the image, which I then pass on to an iframe object created on the fly so the user can read the long desc while hovering over the image.
I have taken a few liberties here in terms of testing. For one, I assumed the data set being passed for the long description was small, hence the small fixed dimension popup. I also assumed the long description will be displayed on a mouseover for all images. The code sample I have can be easily modified to respond to keypress events. Another assumption made is all images will have longdesc attributes, which may not be the smartest thing to do for a real world app. In that case, if the attribute does not exist, you can simply not create the iframe.

Neat idea – that is the kind of thing I was suggesting. Following that original posting, I did a heap more research. The whole issue of long description seems to be/has caused something of a “stir” – particularly the execution of the thing.
I decided, in the end, to use the notion of hidden footnotes – probably along the lines of your original notion.
Back to this example.
It passes the WAVE test by the way… so that is neat. However, for real accessibility purposes, you might need to accommodate an “auto” expanding kind of box area.
While most images don’t in fact need a long description, a basic one would do. Apparently, the whole point of long description is to attempt to describe – as fully as possible – the meaning of an image to an unsighted website visitor.
Long description is usually not there on mouse over – as you then assume the ability to use a mouse… apparently, screen readers pick up on the location of long description and that enables the user to access – somehow. Question then would be – how do they “mouse out”.
Your creation does provide a solution that would resolve one of the main problems of having long descriptions on their own page – that problem being some software actually opens up a whole new window to display them – making the back button redundant and causing concern as to how the viewer gets taken back to the relevant area of the specific page they were on – without having to work through a page again…
I have to say, I am damn impressed with your work here, you are pretty rapid at popping this JQuery/javascript stuff out.
[...] coming up with a quick bit of code yesterday for the longdesc comment that Ruth left, I had another idea. I decided to try approaching the problem using the [...]