Description

According to the HTML 4.01 Specifcation from the W3C: This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.

Longdesc has had a diffficult past. Until relatively recently the attribute has had poor support from user agents - some of whom still don't do much of meaning with it. The fact remains that major assistive technologies currently do support longdesc in a meangingful way and as a consequence it has finally achieved its intended usefulness. Like the 'summary' attribute for the TABLE element there's also a philosophical discussion to be had about whether or not the information provided by an image's longdesc should be exposed to all users. As it is presently implemented by browsers and assistive technologies, the only people who are aware of its existence are users of screen readers, which announce the existence of the long description and (in the case of JAWS) the keystroke to follow to the URI. Given that, it isn't difficult to understand why the usefulness for this attribute is in debate by some.

In HTML5 the longdesc attribute has been removed. Although there's always hope that the HTML5 A11y Taskforce can get resolution to ISSUE-30, I don't see it happening, considering the present push to get HTML5 into Candidate Recommendation. There are already alternate solutions in the works, like a new 'aria-describedat' which works, essentially, the same way but has problems of its own. Despite this, the HTML A11y Taskforce continues its valiant fight and are to be commended.

Update: Per Steve Faulkner, " An extension spec is currently in the works and is expected to pave the way for longdesc to be conforming in HTML5 in the near future.". At that time, I'll amend this page.

Accessibility Challenges

The problem that longdesc seeks to solve is this: Some images are too complex to meaningfully describe within an 'alt' attribute. Historically, the length of text you could put into 'alt' which would be read by assistive technologies varied considerably. While this has changed a bit over time, many (including myself) still often recommend keeping alt text length to about 100 characters. In practice, this is about the length of two sentences. In my opinion, two sentences is about as much as you'd want to use, as that allows for a high-level overview of complex images. Even though a user should be given a good text alternative, that doesn't mean they're always going to want a complete description and may in fact want to just go ahead and skip it.

WCAG 2.0 Success Criterion 1.1.1 says: "Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose..." This does not in any way mandate the use of longdesc or even the alt attribute. What it says is quite clear, IMO. So long as non-text content exists, persons who cannot consume that content must have another means of accessing the meaning & purpose of that content. It just so happens that the primary and most reliable mechanism for creating a text alternative for images is built into the HTML spec: the 'alt' attribute and, for very detailed images, the 'longdesc' attribute.

For complex images, the longdesc attribute isn't as "required" as the 'alt' attribute. Without the alt attribute on images, assistive technologies may fall back to doing something like reading out the 'src' attribute of the image or the 'href' of the link, if the image is in a link - both as a mechanism to give the user something that may be useful to them. It may interest you that according to our internal research there's still an average of 9 images per page which lack an alt attribute at all.

But when it comes to a long description for images, you're certainly not required to use longdesc. You can provide the long description in the same document if you wish. In fact, whatever solution you come up with is fine provided you address the following concerns:

The response you'll get from longdesc's detractors is that longdesc is only discoverable and actionable for a specific population: users of screen readers. And, in my opinion, they're exactly right. To be blunt, I think it sucks that the only people who know can find and follow a londesc are screen reader users. Another population with accessibility needs could benefit from longdesc: people with cognitive disorders. Heck, longdesc could be useful to everyone!

Playing with Longdesc

My answer to this longdesc drama? Suck it, WHATWG and HTML5 WG Chairs, I'm using it anyway.

Here's the thing about longdesc (or any other attribute, official or unofficial, as it were). Whatever attribute you put into your tags will become part of that DOM node. In fact, in HTML5 they have introduced the new data-* attributes allowing you to create whatever attribute you want, so long as it begins with 'data-'. So why don't I just use 'data-longdesc'? Well, because this: "These attributes are not intended for use by software that is independent of the site that uses the attributes.". In other words, client software and assistive technologies won't do a darn thing with it. Browsers and assistive technologies support longdesc! Furthermore, the longdesc is explicitly associated with the image it describes. Its all about knowing when to break the rules.

In light of that, I decided to just play around with some ideas of ways we can make longdesc discoverable and actionable for all. Each of the examples below use identical markup for the image. These examples use the longdesc attribute. They also use jQuery to present the longdesc URI in a meaningful way to all users. The jQuery has been kept simple for readability.

Disclaimer: I realize the examples below don't feature "complex" images and don't link to an explicit description of the image. I chose this image and URL merely for example purposes and because I like Bullmastiffs. For a complete listing of the array of considerations for providing alt text, please read HTML5: Techniques for providing useful text alternatives


Generic long description link

This first example provides a link labeled 'Long Description'. Such a link is clear as to its purpose and works well in context. Out of context, however, it may be less clear, especially if there are multiple images with longdesc, each pointing (as they should) to a different URI

The Bullmastiff is a strong and powerfully built animal that possesses great intelligence and a willingness to please
<!--jQuery-->
$('img[longdesc]').each(function(){
var longdesc = $(this).attr('longdesc');
$(this).after('<div><a href="' + longdesc + '">Long Description</a></div>'); });

Unique link, using alt text.

This second example strips the alt attribute value and puts it into the link text. This is a good approach because it provides better link text (assuming the alt text is clear). Stripping the alt attribute helps avoid repetitious reading of the text. Unfortunately, it also happens to be dog ugly when the alt is long.

The Bullmastiff is a strong and powerfully built animal that possesses great intelligence and a willingness to please
<!--jQuery-->
$('img[longdesc]').each(function(){
var longdesc = $(this).attr('longdesc');
var alt = $(this).attr('alt');
$(this).after('<div><a href="' + longdesc + '">'+ alt +'</a></div>');
$(this).attr('alt', '');
});

Reducing the ugly by using a title attribute

More or less identical in approach to the above example, but this image uses the addition of the 'title' attribute to serve as the link text. Stripping the title attribute helps avoid conflicts between alt & title for screen readers.

The Bullmastiff is a strong and powerfully built animal that possesses great intelligence and a willingness to please
<!--jQuery-->
$('img[longdesc]').each(function(){
var longdesc = $(this).attr('longdesc');
var title = $(this).attr('title');
$(this).attr('title', '');
$(this).after('<div><a href="' + longdesc + '">' + title + '</a></div>'); });

Linking the image itself

The difficulty of each of the above examples is that they inject text into the page. This additional text on the page may be unwanted and can alter the design. This example wraps the link around the image. The use of a different visual presentation may convey to non-blind users that this is actionable while the fact that it is a linked image will be conveyed through assistive technology.

The Bullmastiff is a strong and powerfully built animal that possesses great intelligence and a willingness to please
<!--jQuery-->
$('img[longdesc]').each(function(){
var longdesc = $(this).attr('longdesc');
var title = $(this).attr('title');
$(this).wrap('<a href="' + longdesc + '" />');
});

Captioned Image with long description link

This fifth example strips the alt attribute value and puts it into an adjacent caption and uses the title attribute for link text. This is a good approach because it provides the alt attribute to all users and allows for a unique link text as well. Stripping the alt and title attributes helps avoid repetitious reading of the text.

This one is my favorite. It is universally usable.

The Bullmastiff is a strong and powerfully built animal that possesses great intelligence and a willingness to please.
<!--jQuery-->
$('img[longdesc]').each(function() {
var title = $(this).attr('title');
var longdesc = $(this).attr('longdesc');
var alt = $(this).attr('alt');
$(this).after('<div><em>' + alt + '</em><a href="' + longdesc + '">' + title + '(Full Description)</a></div>');
$(this).attr('alt', '');
$(this).attr('title', '');
});

As with any challenge, you're only limited by your imagination

Whatever solution you find useful will clearly depend on many factors such as the overall design of the site and page containing the complex image, and the purpose of the image itself. You're only limited by your own creativity. For instance, one may consider hacking jQuery Capty combining it with one of the above approaches to indicate presence of longdesc. Alternately you may wish to use Dirk Ginader's Accessible Longdesc plugin and extending that. The short answer for me is still: Suck it, WHATWG and HTML5 WG Chairs, I'm using it anyway.