Data visualizations such as charts, diagrams, and infographics are popular as they can present data in a concise and compact way.
But visualizations are often not accessible due to low contrast colors, insufficient labels, or images without alternative text.
This means that part of your audience might be excluded from the information being presented. With some thoughtful planning, we can create charts and graphs that are accessible to everyone.
When you’re deciding what kind of chart or graph you want to create, it might be tempting to try something different or unique. But when it comes to presenting data, visualizations are most powerful and accessible when the design is familiar rather than a complex novelty.
The important thing is to not overwhelm people with information. If you try to show too much, people might lose the most important pieces. Instead, carefully select only the data that will support your clarity of intent, so that your main message isn’t lost.
Keep your designs simple and clear, and avoid animations as they can be distracting and disorienting. If you must include some type of movement in the visualization, provide a way for people to turn it off.
Color can be a powerful visual tool in visualizations. When designing a chart or graph, be mindful of the colors you use, the contrast of the text against the background, and how you’re using color to convey meaning. For adjacent data parts, like bars or pie wedges, use a solid border color to separate and add an additional layer of visual distinction between the pieces.
For bars in a bar graph or sections of a pie chart, aim to provide a high degree of contrast against the background and against each element. The contrast ratio for these should be 3:1. For example, if you’re using red and blue to show two bars in a bar graph, the red and blue should have a contrast of at least 3:1.
If color is the only way that you’re conveying meaning, your information might be lost to someone who can’t see color. Instead of relying on color alone to explain the data, add an additional visual indicator, such as a pattern, shape, or text label so that even if someone is unable to perceive color, they’ll still be able to understand the data. But be careful not to overdo patterns - keep them simple and clear.
Whether a data visualization is simple or complex, there should be clear text that labels the significant parts of the data. Ensure major elements are identified, such as the chart title, the horizontal and vertical axis and other notable framework elements. Use labels and legends that clearly mark and distinguish the data points.
Also add either brief alternative “alt” text or a longer description that provides context and explains the most important details about the visualization.
Each data point has the callout for the amount so a user doesn't have to guess or rely on color to identify different slices.
Another way to make sure your data and message can be understood by your audience is to provide a supplemental format for the data.
People learn in different ways - some might be visual learners while others prefer a more analytical text-based approach. Presenting data in multiple formats will ensure that people can digest the information in the way that best suits their needs.
Below the bar chart is a link to the data in table form.
Consider providing a link to a longer description or include it adjacent to the chart in a collapsible section.
See Chart Description
Weekly Activities for 1st and 2nd Year Students measured in hours.
- Social Events - First Year 6 hours, Second Year 2 hours.
- Volunteer Activities - First Year 4 hours, Second Year 2 hours.
- Coursework - First Year 9 hours, Second Year 9 hours.
Before you get started, it’s worth pausing and thinking about the data you want to present and what platform, program, or tool you'll use to build your visualization. We'll share three options below for how you might build and display your data visualization.
No matter where you create your data visualizations, you will likely have an option to export as an image (such as .jpg or .svg) or to take a screenshot. These image files may then be used anywhere that you’d like to share the data. When sharing as an image, be sure to include alternative text that succinctly describes the visualization.
The color and design of the visualization is stable and will not change if imported from one program to another.
Best for simple visualizations with limited content. Images may become pixelated. Content owner will have to keep track of the source file for future edits and changes.
These programs have a low learning curve for users new to designing visualization. You can easily make accessible diagrams and charts.
If sharing in a different program or slide theme, the colors or text may change, introducing accessibility errors. In some cases your chart may be converted into an image that would then require alt text.
You may choose to design your own visualizations or use a chart library to design and embed visualizations. Whichever you choose, there are a few additional considerations to keep in mind, such as keyboard access, screen reader access, focus indicator, and names and roles. However, some well-designed chart libraries (such as HighCharts) take care of many of these considerations for you.
Allows the greatest flexibility in design. Versatility in embedding the data visualization in a variety of places for display.
Steeper learning curve. Some tools are not accessible, so use the criteria above to evaluate before building a chart or graph. You might also have to pay for a license to use the tool.