Include the transcript

Mr. Elephant needs a nose job It’s easy to overlook the elephant sitting in the room when discussing the accessibility of infographics. The longdesc attribute allows an image to refer the user to descriptive text that may sit on another page. The aria-describedby attribute connects the image to descriptive content that sits on the same page. Both of these expect descriptive text to be available.

Why not simply package the infographic and descriptive text together?

Advantages and Disadvantages of Including the Transcript

The infographic itself has limited value to the blind user. It’s the transcript that holds the value. Sighted users may prefer the transcript as it allows sections to be copied and shared. The transcript can include semantic markup and linkable content.

However, the transcript can be lengthy and destroys the visual flow of an article. This is especially true when the infographic is floated and the text is expected to wrap. The power of an infographic is its graphic simplicity. Inserting a large chunk of content may decrease the readability of the parent article.

Sharing the package

Sharing the infographic with transcript is also difficult. You can’t count on a novice user to correctly select, copy, and paste large chunks of code. Further, many blogs and social sites will strip some HTML markup, leaving the transcript with reduced semantic markup.

This can be solved by piggybacking on the popularity of YouTube’s iframe pattern. YouTube’s preferred embed code uses an iframe, which has forced WordPress and other social platforms to allow iframe embedding. This technique allows us to easily share an infographic, large transcript, CSS, and JavaScript.

The Packaged Infographic

This page uses an iframe that points to our infographic and transcript.

To the iframe’s page, I’ve added the Yahoo! User Interface library’s CSS file for reset, base, and fonts to provide a good generic style to the transcript. This is needed as iframes do not inherit the parent page’s styles*. Also note, the iframe needs a title attribute.

*The seamless attribute will allow the iframe to inherit the parent page styles. However, it is only supported in Chrome Canary.


I’ve also added CSS to resize the infographic image to the iframe’s dimensions.

img{
	width:100%;
	height:auto;
	}

Sample Infographic

Other Options

2 thoughts on “Include the transcript”

  1. I might be mistaken, but it appears to me that in the transcript you are only providing the text of the infographic rather than describing the image. I would think that to be truly equivalent, the transcript would also need to convey the pertinent information being described by the image. For example, take the infographic at http://testweb.ssbbartgroup.com/training/NonText_Infographic.html
    An equivalent transcript would not just provide the text included in this infographic or data tables listing the statistics, but rather provide a summary of the correlations and intersections between these statistics which is what is being visually depicted. Data tables would also need to be provided to communicate the text contained in the graphic.

  2. You have a valid point. I’ve concentrated on the textual content of the infographic, but there may be visual relationships that also should be included in the description.

Leave a Reply

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