Accessible Infographics

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.

Summer Travel infographicInfographics, 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.

Infographic Accessibility

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.

Accessibility Solutions

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.

ARIA support

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:

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.

Descriptive Links

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:

Projections of the Adélie penguin population at Edmonson Point

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.

Accessible Infographic Options

Join the Conversation


  1. Hi Ted,

    Thank you for writing on this important topic.

    With regards to “Further, it (longdesc) requires building additional pages to host the image description, which increases the site’s complexity.”

    That is not correct. A longdesc’s target can provide a programmatically determinable long description on the same page via a fragment identifier. Example:

    If the long text alternative of an image is useful to all users, keeping it in plain view in the same document and using longdesc for screen reader users to programmatically obtain it is a good option. That way everyone can read it.

    However, if the description clutters the page with redundant information, using a different page containing a longer description might be a better choice. Consider the impact. For sighted users, the consequences of adding a redundant visual text description can be information overload which can waste time and tax attention at the content’s peril. It would be akin to having the value of the alt attribute visible. Removing visual clutter increases understanding and actual time-on-task for the majority of sighted users. This is where visual design plays an increasingly important role. It is well known that reducing clutter improves usability. An off-page longdesc attribute is natively free from a visual encumbrance. It does not impact the visual design. So, authors do not have to worry about how the description text might impact the visual user experience. Authors can, therefore, focus on the experience of people with disabilities while they write their long text alternative. This focus on the primary audience helps authors create text that is well-suited for its purpose. Hiding content from view can enhance the usability of the website for screen reader users without compromising on design. Visual users will have no indication that these design elements are present resulting in visual and non-visual users having the optimum browsing experience.

    Web designers often have quite strict constraints on the visual appearance of the page. Whenever a forced visual encumbrance of a long description is unacceptable due to an author’s aesthetics, an organization’s design guidelines or branding requirements an off-page longdesc can be a good solution.

    In addition a Description Available in a Separate Document Provides Efficiency.
    The ability to use a separate document has a big author maintenance advantage whenever the same image appears in multiple documents. Using one global document to provide long descriptions for multiple instances of the same image is a powerful, portable, re-usable technique. It provides efficiency and scalability making authoring and maintenance easy wherever instances of the same image are used in multiple locations. It is analogous to the power of external style sheets.

Leave a comment

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