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
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.
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.
The infographic’s transcript can be seen at: Mapquest: Make the most of Summer Travel.
Code for this infographic, with longdesc
Find this and other infographics at Daily Infographic.