Longdesc & Other Long Image Description Solutions — Part 1: The Issues

Share this article

You may have heard some discussion about “longdesc” recently which spiked when much debate broke out on whether to keep it in the HTML5 specification. Unless you’re a “veteran” web professional, you may not even heard of “longdesc”. So what is it, you ask, and should you be using it? Let’s examine. A screenshot of the markup from an xkcd comic page superimposed over the rendered page with a longdesc attribute.

What Is Longdesc?

As you probably know, the alt attribute is intended to provide a short text-based alternative description of an image on a web page. Additionally, the longdesc attribute was designed to point to a web page which provides a longer, detailed description of an image, when needed. It complements the image element’s alt attribute; when a description is longer than what feasibly works with alt, longdesc would be used. As we’ll discuss, there are other potential uses for longdesc, but the primary reason for its use is for blind and low-vision users who are using a screen reader and cannot see a content-heavy image. Many use cases exist for a long description which include describing a logo, comic, piece of artwork, graphical chart, infographics, and photograph. (Note that longdesc was specified to support the frame and iframe elements as well, but hardly anyone even knows that, never mind implements it!)

The Controversy

On the surface, the longdesc attribute seems like a great way to provide detailed text descriptions of an image. But unfortunately the technique has never achieved its full potential, to say the very least. So much so, that many believe longdesc should be entirely forgotten and in many resources is no longer a recommended technique. A few years ago, an article was written which documents the extremely small percentage of images which have longdesc implemented correctly (approximately 1 in 100,000 images; 1 in 100 who attempt it). More recently, in defense of the attribute, many examples of proper longdesc implementations were documented (by a variety of entities such as museums, universities, personal blogs, government agencies, etcetera). However you look at it, it’s agreed that the overall process of providing an image long description is broken and something must be done.

Authors’ Issues

So why is longdesc hardly ever implemented or done incorrectly so often? One reason, like many other accessibility-related concepts and techniques, is ignorance; if web authors (designers, developers, owners) don’t understand why they should do something (provide alternative text in this case), they probably won’t do it. Another reason is lack of proper training; authors just aren’t taught how to use longdesc
. Some folks declare that the name “longdesc” itself is an issue, but I don’t necessarily agree. The argument is that the name is misleading which is why many times the text description itself would mistakenly be entered in the attribute value, rather than a URI, as defined (basically, a URL). Although this error does occur often, training is still the source of this problem considerably more than the name of the attribute. In addition, some advocates of WAIARIA insist that the aria-describedby attribute takes care of the issue. But there are many arguments against this as a replacement, many outlined in an HTML5 Change Proposal. The top points are:
  • The aria-describedby attribute cannot point to content off the page (to a URI, as longdesc does); it can only point to in-page anchors (IDREF). A negative result of this is it cannot provide one common external description for the same image repeated over different pages.
  • Screen readers do not pause when they encounter aria-describedby; it is read aloud straight away like the alt attribute and forcing the longer description on the user whether they want it or not. (longdesc essentially inserts a pause where the user can choose to follow the link or not.)
  • The aria-describedby attribute is not backwards compatible.

Browser (Non) Support

Another reason why longdesc is hardly ever implemented is that the major browsers do a poor job of supporting longdesc. If an author’s work won’t render in the browser, he or she is much less apt to do it. Especially if there’s a deadline approaching and there’s pressure to get the job done as quickly as possible, which is too often the case. Of today’s top browsers, only Opera 10.10+ supports it. To help other browsers along, there’s a Firefox longdesc add-on by Patrick Lauke which provides access to the long description, like Opera, through the image’s context menu. There’s also an extension for Opera, TellMeMore, by Charles McCathieNevile which provides a visual cue, as does the Firefox add-on. And I heard a rumor that an extension for Chrome is in the works. The problem of providing image long descriptions isn’t longdesc; it’s primarily the browsers’ failure to notify the user of the presence of the attribute.

A Case for longdesc

If browsers made longdesc more “discoverable” data rather than “hidden”, the attribute could be much more beneficial, particularly including sighted users. Like the alt attribute, providing long description to sighted users can be helpful when an image becomes unavailable such as in the instance of a broken image link, or in the case of low-band Internet connection (including mobile devices, let’s not forget about developing countries where mobile may be the only means of surfing the web). And there are other uses besides visual backups. A long description can assist in comprehension of information, especially for those with cognitive impairments. Also, like audio transcripts and video captions, long textual descriptions of an image can be a means for internationalization as the text can be translated to a different language by services such as Google Translate (as opposed to text within an image which cannot be translated (not feasibly, at least not yet). The fact of the matter is that there are many use cases for longdesc
and that there is a consensus that a mechanism to provide an image long description is needed. For now, there is no fully “functional replacement” for longdesc. It currently works well when implemented as it’s supported by many assistive technologies including popular screen readers like JAWS and Window-Eyes. In addition, there is a history with longdesc; there’s something to be said about backwards-compatibility. There are many guidelines, laws, policies, and standards citing longdesc as a solution. These appear within organizations such as IBM, the United States Postal Service, and the University of California. The longdesc attribute has a critical support base that has taken a dozen years to build and would most likely take as much time to rebuild it with a new attribute/method for long description. Also note that longdesc is a part of the ISO HTML (see IMG under Annex B).

Summary

The longdesc image attribute is a good way to provide detailed descriptions for images that need it. But since most web authors haven’t learned about it and most browsers don’t support it, the technique is very unpopular. Other methods such as ARIA exist to achieve a similar goal but may not be fully supported either and is not a true replacement. Until browser vendors do their part, and until longdesc is rejuvenated in the web community, there will continue to be only partially supported solutions of providing a long description of an image. Oh, and in case you’re wondering about its fate, as it currently stands, longdesc is currently defined as “obsolete” in HTML5. Check out Part 2, where we’ll discuss how to implement longdesc and examine a variety of other solutions and ideas.

Frequently Asked Questions about Longdesc and Other Long Image Description Solutions

What is the purpose of the longdesc attribute in HTML?

The longdesc attribute in HTML is used to provide detailed descriptions of images. This attribute is particularly useful for visually impaired users who rely on screen readers to understand the content of a webpage. The longdesc attribute allows the author to provide a link to a separate page that contains a detailed description of the image, which can be read by screen readers.

How does the longdesc attribute differ from the alt attribute?

While both the longdesc and alt attributes are used to provide descriptions of images, they serve different purposes. The alt attribute provides a short, concise description of the image, which is displayed if the image cannot be loaded. On the other hand, the longdesc attribute provides a link to a detailed description of the image, which is particularly useful for complex images that cannot be adequately described with a short alt text.

How do I use the longdesc attribute in my HTML code?

To use the longdesc attribute, you need to include it in the img tag of your HTML code. The value of the longdesc attribute should be a URL that points to a separate page containing a detailed description of the image. Here’s an example:

<img src="image.jpg" longdesc="description.html">

In this example, “description.html” is the page that contains the detailed description of the image.

Is the longdesc attribute supported by all browsers?

The longdesc attribute is not supported by all browsers. Some browsers, like Google Chrome and Firefox, do not support the longdesc attribute. However, there are plugins and extensions available that can enable support for the longdesc attribute in these browsers.

What are some alternatives to the longdesc attribute?

If the longdesc attribute is not supported by a browser, there are several alternatives you can use. One option is to use the aria-describedby attribute, which can provide a detailed description of the image. Another option is to include a text description of the image in the main content of the webpage.

How can I make my images accessible to visually impaired users?

There are several ways to make your images accessible to visually impaired users. One way is to use the alt attribute to provide a short description of the image. For complex images, you can use the longdesc attribute to provide a detailed description. You can also use the aria-describedby attribute to link the image to a detailed description in the main content of the webpage.

What is the WCAG 2.0 guideline for long descriptions of images?

The WCAG 2.0 guideline recommends using the longdesc attribute to provide long descriptions of images. This guideline is part of the Web Content Accessibility Guidelines (WCAG), which provide recommendations for making web content more accessible to people with disabilities.

How do I write a good long description for an image?

A good long description should provide a detailed and accurate description of the image. It should describe all the important elements of the image and their relationships. The description should be written in simple, clear language that can be easily understood by all users.

Can I use the longdesc attribute for all images on my webpage?

While you can technically use the longdesc attribute for all images, it is generally recommended to use it for complex images that cannot be adequately described with a short alt text. For simple images, a short alt text is usually sufficient.

What are some common mistakes to avoid when using the longdesc attribute?

One common mistake is to use the longdesc attribute to provide a short description of the image. The longdesc attribute should be used to provide a detailed description of the image. Another common mistake is to use the longdesc attribute for simple images that can be adequately described with a short alt text.

Dennis LembreeDennis Lembree
View Author

Dennis E. Lembree is an accomplished web developer who has worked for a variety of companies including PayPal, RIM, Ford, Google, and Walt Disney World. He is the author of Web Axe, a podcast and blog focused on web accessibility, and the author of the award-winning, web-accessible Twitter application Easy Chirp. He enjoys attending and speaking at conferences, meetups, and webinars. Outside of the tech world, he likes playing guitar, watching football, and frequenting Starbucks. Mr. Lembree is originally from southeastern Michigan and has also lived in Orlando, Florida. He now resides in Cupertino, California, with his wife and their two boys.

Editor's Choicetutorial
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week