Please note: This series of articles on accessible infographics will be the basis of a presentation at CSUN 2013: Infographics – Making an image speak a thousand words.
Infographics, images that combine text and graphics to summarize complex ideas, have seen rapid adoption. They are easy to understand, can invoke an emotional response, and are easy to share. This social sharing aspect makes them also incredibly difficult to make accessible.
This project explores the options for creating complex infographics that are also accessible. More importantly, how can these graphics and their accessible content, be shared on Facebook, personal blogs, and other sites?
The solution should also be as easy as embedding a YouTube video or copy and pasting a snippet of HTML. Further, the infographic designer should also find the technique approachable.
Normally, an image provides context to a document. Sometimes, such as a work of art, the document provides context for the image. The infographic is the document by itself. There may be little to no supporting text to provide context for what the image represents.
Further, most infographics describe complex topics that cannot be described by the alternate text attribute. The challenge for infographic developers is to provide these engaging images while also providing the information in a non-visual format.
These solutions do not consider the screen reader user as the only audience. They place equal importance on developers, including bloggers, as well as marketing teams that hope to generate publicity by creating engaging infographics. They were tested against the following criteria:
- Browsers and screen reader support
- The viewers ability to copy/paste the content
- Ease of coding and sharing
The longdesc attribute
The longdesc attribute is the most obvious solution for infographics. This attribute lets a screen reader user know the image has a full description. The user can access that information by using a key command, such as Control + Enter. The longdesc is simple to implement, but is not fully supported by all browser and screen reader combinations. While the images content can be on the same page, most implementations of longdesc place the description on a separate page. This requires additional effort and dilutes the SEO optimization of the infographic page.
HTML5 and the longdesc attribute
The longdesc attribute has been targetted within the HTML5 standard for deprecation. The argument is the longdesc is rarely used properly. More importantly, the description should not be hidden within an attribute that targets assisted technology. This has been vigorously debated. This project looks at various methods to incorporate infographic descriptions. It’s not meant as an argument to save or deprecate the longdesc attribute.
The ARIA standard allows developers to make interactive, application-like web sites accessible. ARIA attributes allow developers to define roles, states, and labels. There are two attributes that could be used for making infographics accessible. The aria-describedby and aria-labelledby attributes point to the transcript, which is available on the same page as the infographic. Both methods announce the transcript to the user as a single string as the user places focus on the image. There are key differences:
- Aria-describedby closely matches the longdesc experience. The description is announced after a short pause and is treated as secondary content.
- With aria-labelledby, the transcript replaces the image’s alt text. Long transcripts will confuse the user, as they will be presented with a long text string before the screen reader announces they have focused on an image. However, this method is not fully supported and user experience is inconsistent.
Separating the infographic and content
The most accessible method for making infographics accessible is to place the text version of the image directly after the graphic. The content is:
- Visible to all users
- Include semantic markup
- Easier to read for those with low vision
- The text provides good content for search engine results.
This technique can significantly increase the height of the page, making it inconvenient for placing an infographic within an article. This can be solved by hiding the transcript visually while providing it to screen reader users or by toggling its visibility to make the transcript visible for everyone.
While the longdesc attribute provides a method for screen readers to access the infographic’s transcript, the more universal method is to provide a link to the transcript. The link gives all visitors access to the content. Sharing the infographic with link also drives additional traffic back to the infographic creator, subsequently helping search engine optimization.
Sharing an infographic
The longdesc attribute provides the easiest method for sharing an infographic. The developers simply need to provide the image’s code:
However, this becomes more compliated when including the transcript. Complex infographics could require 100+ lines of code. YouTube and Flickr grew exponentially because they made it easy to host and share content. YouTube’s iframe based video embeds have forced web platforms to accept this tag within online editors. It’s fairly easy to code and simple to share.
The fast rise in popularity of infographics on social networks has made the inaccessibility of infographics a significant issue. This presentation will discuss more options for making infographics accessible and viral. This presentation combines prototypes and patterns by several accessibility engineers.
Accessibility IQ features an infographic with skip link to the content in plain text. The infographic image can be shared without the text content.