Infographics

Infographics are visual representations of information, data, or knowledge designed to present complex information quickly and clearly. They combine graphics, charts, and text to simplify and convey a message in an engaging and easy-to-understand format. If you want to be equitable, you should convey all the information in an accessible way.

Infographics using bitmap image

If I am using infographics using a bitmap, should all information be in the alt ? We prefer to minimize the use of extensive alt text whenever possible, opting instead to provide detailed descriptions within the main text. This approach is often easier for screen reader users who find navigating live text simpler than alt text. As suggested in the Infographic Alt Text article, one can use a short summary for alt text and place a more detailed description within the main text underneath.

The information on this page is also covered in the W3C's Complex Images Tutorial. We do note we did not implement their recommendation of using longdesc since it is on the list of obsolete HTML tags on the WHATWG specification.

Infographic illustrating the size of a petabyte, showcasing its equivalent storage capacity in terms of data, movies, and digital photos it can hold.
Description of the above image

Do you know how big is a Petabyte?

It would take you over 2.5 years of nonstop binge watching or 11, 000 movies to get through a petabyte's worth of 4k movies.
There is 20+ PB of data in the library of congress.
If you take a petabyte's worth of 1GB flash drives and lined them up end to end, they would stretch over 92 football fields.
You can have 4,000 digital photos everyday for the rest of your life.
Sources of this image are Lifewire.com, Blogs.loc.gov and cobaltiron.com.

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.

☜ Scroll to read full source ☞

Infographics using Scalable Vector Graphics(SVG)

If an SVG (Scalable Vector Graphics) is used for infographics, and the text within it would accurately describe the information inside the infographics, then SVG authors should ensure the text nodes are read from top to bottom, left to right. As mentioned in Tips for Creating Accessible SVG by Léonie Watson, the best way to make SVG accessible to Assistive Technologies (AT) like screen readers and speech recognition tools is to put it directly into your HTML using the svg tag, instead of embedding it using the img tag.

Since this solution requires adding to code structure of the SVG image (specifically, the `aria-hidden` to decorative parts of the SVG and possibly changing the order of text nodes changes so screen readers from top to bottom, left to right. As such, designers should not assume that just creating an SVG with live text will "just work". A developer (or a designer with coding experience) must be involved to make sure the SVG complies with the coding steps in the walkthrough below.

Here is an example of an embedded SVG with accessible text:

This inforgraphics represents steps for a process. This image is designed by Freepik. STEP 01 TIME Time flows steadily, a river of moments past and future dreams. STEP 02 TALK Conversations ripple through time, bringing people together. STEP 03 LOOK Gaze deep into reality, where stories wait to be uncovered. STEP 04 DRAW With inspired hands, bring visions to life and into reality.
This image is based on this template with steps for infographic on from Freepik

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.

☜ Scroll to read full source ☞

Screen Reader Inconsistency

When using a SVG for infographics, there may be scenarios where VoiceOver (VO) in Safari reads non-clickable text elements as links. To resolve this issue, follow these steps:
  1. VoiceOver (VO) in Safari may announce your text element as a link due to the presence of a tspan element within it, which it might interpret as an interactive link. To address this, use only text elements and position them using the 'x' and 'y' attributes.
  2. Additionally, when an id attribute is present on a text element, it can sometimes be misinterpreted as indicating interactive or clickable content.

Testing Consideration

Please ensure that the SVG doesn't have attributes such as 'inkscape' and 'sodipodi' within it for the unit tests to pass.