The longdesc attribute

Wouldn’t it be nice if there was a standard method for providing long descriptions of complex images, charts, and infographics? Not surprisingly, there is. The longdesc attribute provides a link to a web page that contains a long description of the image. For an art museum, the long description could be a visual description of a painting. For financial pages, the long description could be a text description of a financial chart. Infographics would logically have the transcript.

This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.
Including an image: the IMG element – W3C

Longdesc benefits

The longdesc attribute should provide the best option for making infographics accessible. The attribute is easy to program, the transcript can be easy to read, and it’s easy to copy and paste the image’s code for sharing. The longdesc requires no additional CSS or JavaScript to allow the user full access to the accessible content.

What’s the problem with longdesc?

While the longdesc attribute is the logical solution for making infographics accessible, there are some problems that prevent adoption.

Surfacing the longdesc information via JavaScript

Dirk Ginader created a small JavaScript solution that provides an interface for all users to access the longdesc information. This solution inserts a link that swaps the image with the infographic information.

Sharing the Infographic

The code for an image+longdesc is pretty simple and easy to copy and paste. You should add an absolute url (start with http://) if you expect others to share the image. The infographic’s longdesc will not be maintained when copying the image into Facebook or other social media pages.

Sample Infographic

Summer Vacation Infographic

The infographic’s transcript can be seen at: Mapquest: Make the most of Summer Travel.

Code for this infographic, with longdesc

Summer Vacation Infographic

Find this and other infographics at Daily Infographic.


7 responses to “The longdesc attribute”

  1. chaals Avatar

    Agree that it would be nice if VoiceOver stepped up. Unfortunately it seems that the Apple is generally opposed to the longdesc attribute.

    Meanwhile, I’m trying to find time to finish a version of TellMeMore that will work in Yandex.browser and Chrome.

  2. Chris Kennish Avatar

    Ironically, the longdesc attribute on your example is not a valid url. Presumably it should point to: “” but it actually points to: “Mapquest: Make the most of Summer Travel”, which appears to be the title of the target document.

  3. Ted Avatar

    That’s pretty funny. Thanks for catching it. I’ve updated the sample code.

  4. Chris Kennish Avatar

    A pleasure. Nice article.

Leave a Reply

Your email address will not be published. Required fields are marked *