Data Visualizations

Good data visualizations allow us to present complex data sets and trends in a way that tells a compelling story visually, for example by using maps, charts, or other graphical representations. When done well, visualizations can ease the cognitive load and allow people to better process large amounts of information.

A good data visualization will also be created so as not to inadvertently exclude users who may access, perceive, or process information differently.

Color is an essential component of good design, but more than 4% of the population (approximately 1 in 12 men and 1 in 200 women) has some form of color blindness. Poor color choices and reliance on color alone to convey meaning may result in content that is difficult or impossible for these individuals to understand. Three key accessibility strategies for color:

Use good color contrast

The Web Content Accessibility Guidelines (WCAG) provides guidance regarding color contrast. Body text must have a color contrast of at least 4.5:1. Large text (18pt or larger) must have a color contrast of at least 3:1. Non-text content (buttons, graphics, charts, etc.) must have a minimum contrast of 3:1. Visit the Digital Accessibility: Color portion of this guide for more information about color contrast.

Use some visual indicator in addition to color to convey meaning

The best way to ensure that your color choices won't present barriers to people with color blindness or limited vision is to include some means other than color to designate lines, bars, bubbles, or other data elements. Direct textual labelling of these objects is recommended but you can also consider adding a pattern or a shape marker to help differentiate between data.

Provide white space between adjacent shapes

A small border of white space between objects, for example regions on a map or overlapping bubbles on a chart, can also help people with color blindness or limited vision distinguish between your data sets.

 

It is important to remember that not everyone processes information visually in the same way. Some users will benefit from additional textual content accompanying your data visualization.

Meaningful Title

Provide a meaningful title that describes the content and scope of your visualization. This lets users know the visualization's purpose and sets expectations. This is a good opportunity to highlight what you expect the user to learn from the data presented.

Summary

A textual summary of the key takeaways can be helpful in communicating the trends or relationships that you are illustrating.

People with blindness or limited vision, or people with limited fine motor control often do not use a traditional mouse, instead relying on just the keyboard to interact with digital content. For this reason, data visualizations that include interactive elements that can be operated with a mouse must also be operable with the keyboard. 

  • Use your tab key to move through the interactive elements like data filter drop-downs or select buttons, making sure that you can reach and interact with each interactive component.
  • Make sure that any additional textual information that may be provided on mouse-hover is also available to keyboard users, either on keypress or via some other means of access.

In addition to providing a meaningful title and textual summary of the key takeaways, there are some things you should do to ensure that your visualization is accessible to screen reader users.

  • Allow users to download the filtered data set to open in their own spreadsheet software.
  • Include alternative text (also known as "alt text") that describes the type of visualization, and if there isn't already a textual summary, summarize the key points for the screen reader user.
  • Provide textual descriptions of data animations.