Configuring Internet Explorer to handle longdesc

What is longdesc and why is it important

Users with visual impairments are often not able to access images on web sites, now this is probably not news to anyone reading this blog; and you are also probably aware of the technique of using an alt attribute in the html markup on images to provide a pithy summary of the content of the image. However it is often the case that an image is too complicated to be described completely in a single short sentence, but adding any more than that to the alt attribute results in a far too verbose experience for users that rely on screen readers or other assitive technologies.

longdesc is another attribute, introduced originally in 1997, and adopted by the W3C as a recommendation in HTML4, that provides a method of linking to detailed alternate text for complex images primarily to aid web users with visual impairments. A newer related attribute aria-describedby does a similar thing; the main difference being that longdesc ponts to an external resource, and aria-describedby points to a resource elswhere in the same page. If all of this is unfamiliar to you, or you would like some specific guidance on what attribute to use where, and how to create usable alternative text, the W3C is developing a comprehensive guide.

Both the longdesc attribute and its modern cousin aria-describedby, are attached to an image and essentially turn it into a hyperlink, or at least that’s the theory; although longdesc is used by modern screen readers like JAWS, WindowEyes, SuperNova/Hal and so on, in fact for the most part the browsers themselves ignore it. Hence in the next major revision of HTML which is being drafted now it has been declared non-conforming.

So, just recently I met John Foliot at dinner at the CSUN 11 conference, I’ve known John online for a while now, and it was good to finally meet up in person. John is a very interesting and outspoken individual and one of a few passionate accessibility advocates who are seeking to have the longdesc attribute re-instated as a full part of the HTML5 specification, and so of course the subject came up during our conversation. I mentioned that I thought it should be fairly straightforward to get IE to actually do something useful with longdesc, and so having a spare couple of hours one afternoon  this week, I actually got down to trying it.  This should work in most versions of IE.

My thought was that it should be easy to add a context menu entry to extract the longdesc attribute value and have the page navigate to its content. Well as it turns out, it is fairly easy if you know how. Unfortunately that know-how is a little hidden, so I thought I’d write up the technique here, so this is dedicated to John, but also here for anyone interested.

Custom context menu’s in Internet Explorer

Context menus are made available when you use the right mouse button to click on something in the web page. IE comes with a few built in, but it is also possible to add more, and products like Adobe Acrobat reader and Microsoft Office for example do just that. Custom context menus are a fairly old feature, dating back to IE4, and what most people don’t realize is that if you have a little javascript programming skill (essential for any web developer these days), and are prepared to take on the Windows registry, it is pefectly possible for you to add your own

Adding a context menu

To add a context menu entry you need to create a registry key with the label of the new entry within the set of keys defined for IE. This registry key will have a value in it that points to an html file containing javascript. That script will get executed when the new context entry is clicked.

Now if that sounds a little daunting, dont worry I’m going to break it down into nice small chunks for you. And show you how you can add a context menu labelled “Long Description” which will send the browser off to the linked resource

The script

So what does the script look like that we will be calling? well have a look at the complete text, and we’ll break down a little in the next section:

  <script>
       // Get the window object where the context menu was opened.

     var win = external.menuArguments;

     var doc = win.document;

     var url = win.event.srcElement.getAttribute('longDesc');

     if (url != null && url.indexOf("http://") == 0) {

         win.navigate(url);

     } else if (url != null && url != undefined && url != "") {

         var path = doc.URL.split('/');

         var newurl = doc.URL.replace(path[path.length - 1], url);

         win.navigate(newurl);

     } else {

         alert("No suitable long description provided");

     }
</script>

The main difference here to standard page scripting, is that to get access to the window; we can’t use the window object directly, but need to dereference is through a special variable external.menuArguments, after that we can access the object clicked on (which we will restrict to being an image in the setup described below), using the event property in the window. This includes a property srcElement which is our element, so we can grab the longdesc attribute value from there.

If the longdesc is a full uri we can just navigate directly, but if not then we need to do a bit more work. For some reason it doesn’t seem possible to get access to the window.location property which would make constructing the full link a great deal easier, but fortunately we can use some standard javascript trickery to deconstruct the document URL, and then create a new one with the attribute value substituted in.

As you can see the code itself isn’t that hard. If you want to go ahead and make it fancy, for example to support aria-describedby, pull up the data in a spearate window or iframe, go ahead and knock yourself out. Its all just scripting, but for the purposes of this demo we’ll just treat it as a standard hyperlink.

OK, so put this text in a file somewhere on your computer, for this example I’m going to put it at C:longdesc.htm; however it can go anywhere, even on the open web if you want although that could be a security issue.

Installing

The next thing you will need to do is fire up regedit. This is a standard tool that ships with Windows and allows you to tinker with all the internal settings that programs running on the platform needs. You need to be somewhat careful with this tool, as it can seriously mess up your computer if you touch the wrong stuff. But use it with care, backup the registry and follow the instructions carefully and you should have no problem.

For those of you who have seen regedit before, we need to create the following: [HKEY_CURRENT_USER Software Microsoft Internet Explorer MenuExt &Long Description] (Default) = “C:longdesc.html” Contexts = 02

The Contexts value restricts the context in which the menu item will show up. 0x02 will restrict it to just images. Other possible contexts are:

• Default = 0x1
• Images = 0x2
• Controls = 0x4
• Tables = 0x8
• Text selection = 0x10
• Anchor/Link = 0x20

And these can be added together, so for example if you wanted images and tables it would be 0x10.

If you need a little more guidance than that, then we’ll will walk you through it in detail now.

First up we need to cal up the run dialog in the start menu, type regedit here:

Then Windows will find the tool:

Click on this and the tool will start up. It will ask if you want it to be able to change Windows, click on yes. When regedit comes up, expand the tree items on the left hand side, starting at HKEY_CURRENT_USER.

Then navigate down to the Software tab and expand that.

Then to Microsoft

Internet Explorer

MenuExt

Right click on the MenuExt item and select New > Key

Then type in the name you want to appear in the menu. I used “Long Description”

Then on the right hand side, right click on the Name “Default” and select Modify…

For the value, use the pathname of the file you saved earlier. Then right click on the name “Long Description” to add a new DWORD (32 bit) Value

Name the new DWORD “Contexts”, and set the value to 2 (Hexadecimal).

Your final setup should look like this:

Then close Regedit, the values are automatically saved. It is possible actually to create an installer which will handle the all the registry settings for you, but that’s more work than I really had time to get into here, and besides i think its instructive to see how these things work.

So, now you should be set up. At this point you need to shut down all your IE windows and restart it, as the context menus are loaded at startup.

Testing

To test your install, once you have shut down all your internet Explorer pages and come back to this page. If you then right click on the image below you should see the menu entry for long description, select this and the page should navigate to it’s description.  Note, that due to the way this blog is set up it may appear in a different window or tab.

For another example check out this CSS Squirrel comic.

Notes

One of the downsides of the context menu is that there is no visible indication that there is any longdesc link, to get round this, you could use CSS in a user stylesheet to highlight the image.

img[longdesc] 
{
    border:solid 2px blue !important 
}

You can set a user stylesheet using the accessibility settings in IE. I freely admit that a blue border isn’t exactly the Height of CSS sophistication, but I’m sure some of you CSS guru’s out there can come up with something a little more compelling than this. Remember you have to restart IE after you set the settings, otherwise it won’t show up.

For keyboard users. Usually images are not in the tab order, and although adding longdesc really ought to make them so, it doesnt. The example here has the tabindex attribute set to 0, so that if youare using IE9 (as I hope you are, since it incldes lots of HTML5 goodness), then you should be able to tab to the image and call up the context menu using SHIFT-F10

OK, so there we go. longdesc support in Internet Explorer.

Regards,

Sean