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.

The longdesc is poorly supported. The JAWS screen reader will announce the longdesc option and give the user the proper user experience. However, the longdesc is not supported by other screen readers, such as VoiceOver.
The longdesc attribute has been targeted for deprecation in HTML5 and this is being hotly debated within the HTML5 and Accessibility community. The longdesc provides semantic information that is hidden to the vast majority of users. The argument is that information this important should be visible and made available to all users. For instance, the longdesc attribute could be replaced by a text link to the transcript.
While the transcript can be hosted on the same page, it’s commonly stored on a separate web page. This moves the search optimization away from the main infographic page. This could affect the discoverability of the content.

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.