How to Create Accessible Infographics With Venngage

By Ann Smarty, Feb 04, 2020

Create_Accessible_Infographics_with_Venngage

Infographics are content assets that convey information in a visual way. While visualizing your content has multiple benefits – from making information easier to grasp and remember to encouraging people to share that information, infographics can also make content inaccessible.

Where infographics can lack is in making the visualized information accessible to all, i.e. people with visual disabilities.

Therefore, infographic designers must include accessibility factor into their design process to ensure the content is:

  • Easy to see for people with visual difficulties, such as color blindness 
  • Recognizable to screen readers
  • Possible to understand to people with cognitive disabilities

The Concept of Inclusive Visual Design

More than 60 million Americans, are reported to have a disability of some kind.

That’s more than a quarter of US population which far too many of web users for graphic designers to ignore.

Shir Ekerling Quote Acessible Design


 

As Shir Ekerling, CEO of accessiBe, an AI-based start-up offering an automatic web accessibility solution, put it,

“The number of disabled users who are cut off from using the Internet fully is enormous. They are far too many to dismiss as marginal and irrelevant.”

This is where the concept of inclusive visual design comes into play including as many people’s needs and abilities as possible.

How to Design an Accessible Image Infographic Using Venngage

When it comes to infographic design, consider both color blindness and low vision should be taken into account.

Make sure your infographic is clear and easy to understand. People with low vision should have no difficulty reading and understanding it.

Practically, this means:

  • Making sure to provide good contrast
  • Ensuring your font size is large enough

Understanding Accessible Color Contrast

When designing your infographic, you can use a contrast checking tool like this one to pick background and foreground colors that pass Web Content Accessibility Guidelines (WCAG) requirements. This will ensure your infographic is easy to read for people with poor vision.

accessible infographics

Once you have selected your colors, you can view the color combination in grayscale to identify how the colors appear to a colorblind user:

accessible infographics color selection tool

Pro Tip: To find your color RGB hexadecimal format inside your infographic editor, select that area and click “color” icon on top:

accessible infographics screencap

From there you can adjust the color until you find a more suitable background color using the contrast checker.

It is also recommended to avoid using shades of gray, yellow, and orange.

You can also upload your whole infographic to see whether your colors pass the requirements:

accessible infographics color scheme

Here is a cheat sheet for picking color blind friendly palettes:

color-blind-friendly-palette-infographic


 

Choosing an Appropriate Font Size

When you have to visualize a lot of information within one image, it is very tempting to use tiny font to be able to say more.

Unfortunately, this goes against inclusive visual design principle making your infographic hard to read for partially sighted users.

WCAG 2.0 requires a text font no less than 10 points (which is about 13 pixels) for it to be accessible. Smashing Magazine suggests sticking to 16px fonts.

Additionally, it is recommended to avoid “fancy” fonts as it may pose some issues to people with cognitive disabilities. The best practice is to use “standard” fonts, avoiding cursive and fantasy fonts.

  • One of the most accessible fonts is Arial; other good options are Calibri, Helvetica, Verdana, and Tahoma
  • Try to use no more than 2 types of fonts
  • Again, make sure there is a good color contrast between the text and the background (use the color contrast checker above).

Pro Tip: Generally, Venngage’s infographic templates offer readable fonts by default but you can always change the font by selecting the text and clicking through available options:

accessible infographics font selection

[You can also change the font size using the drop-down next to the font]

Create a Detailed Transcript

More than 7,2 million of adults (ages 16 to 75+) were reported to have a visual disability in the United States in 2016.

It was also estimated that over 90% of the visually impaired use screen readers. Screen readers work by translating textual content to either voice or braille.

Therefore it is important to provide a detailed text transcript for your infographic:

Make Your Transcript Easy to Find

  • Always make it clear where the transcript can be located by using headings like “Text Alternative” or “Text Version”.
  • Use “Skip Navigation” links to make your graphic transcript easy to locate. The “Skip Navigation” concept was invented to let screen reader users go directly to the text version of the infographic. You can use this detailed tutorial on how to add anchor links to create accessible “Skip Navigation” for your infographic page.

Structure Your Transcript Using HTML Subheadings

Within your transcript make sure to use H2/H3 subheadings to ensure your content structure is easy to understand (when listening to it).

Screen reader users should be able to scan the page by headings and understand each section. This helps screen reader users to navigate through your transcript easily and come back to any section they want to listen to again.

One of the best ways to structure your content well is to use Text Optimizer’s Content Ideas section. It generates the most popular questions on each topic, so you can use the suggestions as the base structure of your content.

accessible infographics

Using question research for content structuring makes content much easier to understand and more interesting to read (or listen to).

You can also select an accessible theme which would have many of accessibility elements (including “Skip Navigation”, breadcrumb navigation, clear site structure, etc.) already in place.

Test Your Transcript for Clarity

Use Text-to-Speech tools to simulate screen reader user experience and make sure your transcript is clear enough when it is being read to you.

Provide an Alternative File Format

Finally, offering alternative file formats is always a good idea. It includes all kinds of audience into your content marketing strategy.

For example, you can download your infographic as a PDF file and offer it as a free download. People with poor Internet connection or those using PDF files for printing will be thankful. You can download Venngage infographics as PDF files.

Additionally, you can turn your infographic into a video and let people with hearing or attention difficulties watch a more entertaining version.

Conclusion

In many ways, creating an accessible infographic means making your infographic easy to read and understand which also helps make it more useful. On the other hand, providing a detailed transcript will make your infographic page SEO-friendlier.

That being said, following the steps above, you will achieve more goals, beyond catering to people with various disabilities. Specifically, you will ensure your infographic search discoverability and make it more engaging. Good luck!

More infographic design guides:

How to Make an Infographic in 5 Steps

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible

How to Pick Colors to Captivate Readers and Communicate Effectively

About Ann Smarty

Ann Smarty is the Brand and Community manager at Internet Marketing Ninjas as well as the founder of Viral Content Bee. Ann has been into Internet Marketing for over a decade, she is the former Editor-in-Chief of Search Engine Journal and contributor to prominent search and social blogs including Small Biz Trends and Mashable. Ann is also the frequent speaker at Pubcon and the host of a regular Twitter chat #vcbuzz.