Infographics may not belong on the web

by: Joe Watkins

  • 02 April 2016

Infographic image search result

The web is one of the only media outlets that we currently have at our disposal that, out-of-the-box, inherently comes without discrimination of its end user. While it is true, you may need a computer and a connection to the internet to leverage its superpowers, the very nature of the web is inviting to all.

The first website ever created by Tim Berners-Lee defines the web:

“The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.”

Infographics are defined as graphic visual representations of information. This form of representing information dates back to the 1600’s, or even as early as cave drawings, but that does not give it an automatic place on the web.

There are many fixed/print-centric concepts that do not fit in well with the web. Responsive Web Design has done a great job of helping us shed these antiquated methods of delivering stories.

Why infographics may not be the best mechanism for delivering a story on the web

  • If done incorrectly, and most are, only people with vision can consume the content.
  • Search Engines may not be able to consume the visual content in the infographic and may not index its content.
  • Flattened image-based infographics may only cater to people that speak or understand that language.
  • Generally, the content in the image-based infographic is not accessible or auto-translatable.
  • Infographics usually require context. Smaller viewports may only allow for portions of an infographic to be visible at a time, thus removing context from the user which may lead to confusion.
  • Assistive technology may not be able to consume the information and present it to some users.
  • File Size: Not everyone on the planet has a broadband connection and a shiny new Macbook Pro. Large file sizes from infographics can be costly for users to download.
  • An overload of visual clutter in infographics can be disorienting to many users.
  • It can be very difficult, and may require multiple versions of the infographic, to work across multiple screen sizes. Native browser support is limited for responsive images.
  • Making updates or changes to image-based infographics can be time consuming and costly which introduces maintainability issues.
  • Scoping costs for infographics can be difficult due to unknown design costs as well as development implementation costs.

How to responsibly do infographics on the web

If you or your client is hellbent on having infographics be present in your web-based experience I have some suggestions on how you can make these enjoyable to a wider audience. It should be understood that these suggestions could add complexity and time to your project but are worth the extra effort.

  • Be sure to include supporting HTML-based text that accompanies the image-based infographic. A paragraph or two setting up the visualization.
  • Use alternative text by leveraging the alt attribute when using the infographic as an image.
  • Consider using only HTML or inline SVG for the infographic. (*Red alert, this may take a long time and be costly)
  • Use Aria attributes to make your infographics more accessible.
  • Provide visually hidden HTML-based text copy that describes the visual content in the infographic. Using Aria attributes you can connect this chunk of content to the infographic. e.g. aria-labelledby
  • Make wise color choices in your design. Color blindness if very common…1 in 12 men are color blind.
  • Step back from the content in the visualization and ask yourself if anyone could understand the content without being close to it.
  • Ask yourself how the infographic will scale across all screen sizes.
  • Make sure the CMS supports all of the above for you or your client. e.g. Alternative text fields,rich text editors for visually hidden content, and responsive image solutions.

In summary, the ol’ mishmash of graphical bits of information may not be the best mechanism for telling your story. Leveraging technologies of the web in tandem with consideration of the fact that not all your users are like you, could lead to a more inclusive experience and your story could reach more people.