3 ways to make your charts more accessible
How to increase impact and engagement by designing for everyone
When putting together a visualization or data story, it’s useful to remember that not everyone experiences the world as you do. A color palette that looks pretty to your eye might be difficult to differentiate for some viewers. Or a chart that you find easy to “read” might be hard to interpret for someone less data literate.
This is a problem. If we don’t make our visuals accessible, not everyone can understand them, reducing their engagement and impact.
Last year, we introduced new screen-reader settings to provide a text alternative to visual elements. But there are also many ways to make your charts more accessible through design choices. These include the use of clear descriptive text and choosing accessible and contrasting colors. It’s also worth considering the pros and cons of motion and audio.
1. Text
Good, clear titles, annotations and labels are unparalleled in their ability to show someone how to read a visualization. Especially when it comes to less widely known chart types, it’s best not to assume that your graphic will immediately make sense to everyone.
Descriptive titles that summarize your main messages
When your title includes the main point you’d like to bring across, the mental load of understanding your chart decreases, as the title tells people what to look for (or confirms they are reading it as you intended). This is helpful for everyone and can open the door to further exploration. Take the following example:
The descriptive title makes it clear what is happening and sets the context for what your readers should focus on. It can work well to set the title before you fine-tune your chart, to make sure your design choices reinforce the same message.
Screen-reader descriptions
An added bonus for using descriptive titles is that, in Flourish charts, titles, subtitles and footers are read out by screen readers by default – either on click or when the assistive technology is reading through a whole page that contains embedded graphics.
In addition to this, it’s possible to add additional screen reader text in order to provide an alternative to the visual aspect of the graphic specifically.
The image on the right is an example of a screen-reader description.
Labelling and annotation
Labelling directly on a chart can make it much easier to read: users don’t have to look back and forth between the data points and the legend to interpret the colors, and similar colors are less likely to be confused. This is not only helpful for those with impaired vision or color blindness, but for everyone else too.
Make sure your labels are short and simple – having large blocks of text all over your chart won’t make it easier to understand. Avoid very small font sizes and consider re-using the data colors for the text, to reinforce which points or series the labels belong to. (Using data colors in titles can work well too.)
Speaking of font sizes, most Flourish templates use rems instead of pixels, which means that text will scale up and down according to the display size of the graphic and the base font size – which users can set based on their preferences and accessiblity requirements. You can learn more about sizing with rems in our help doc.
2. Color
Globally, at least 2.2 billion people have a vision impairment. High contrast colors as well as making use of separation and space are key to helping them read your charts.
Use accessible colors
Where possible, use colors that are bold and clear enough for people to see both text and graphical elements, like lines and points. The Web Content Accessibility Guidelines (WCAG) suggest meeting the WCAG AA requirements – something that is required by law for public bodies in several countries.
To check if your color (and font size) choices are AA accessible you can use a contrast checker website. Here you can check if there is enough contrast between the foreground and background colour for someone with a certain level of impaired vision to be able to see your data or text.
For your colours to be AA accessible they need to have a contrast ratio of at least 3:1 for graphical elements, and 4.5:1 for normal text.
In our example above, the peach colour on a white background fails the AA requirement for both text and graphics as it has a low contrast ratio of 1.46:1. A bolder colour like burgundy red meets requirements for both text and graphical elements, with its higher contrast ratio of 8.52:1, while the bright orange meets requirements for graphical elements but not for text (3.02:1).
While bold colors are more likely to meet AA requirements, you should pay attention to not overuse them and create a visualization featuring all colors of the rainbow. This “unicorn puke” effect can be overwhelming and lead to your readers not picking up on the main message of your visualization. Instead, think about cutting down the number of series or categories being plotted or using more muted colors that still have a contrast ratio of 3:1 for graphical elements.
Keep in mind that your axis labels should also meet AA standards.
In addition to checking that colors meet contrast standards, it is good practice also to check them for different types of color blindness. Free tools like coolors.co and Adobe Color make it easy to check a palette’s suitability across different types of color blindness.
Making use of separation and space
Separation techniques can help users distinguish between series. This means users don’t have to rely on just color to understand where one category ends and another begins.
In bar and column charts, one way to do this is to increase the space between bars. In Flourish you can do this both for the gaps between bars along the axis, and by adding tiny gaps between the bars in a stack. Compare these two visualizations, for example:
Using lines between sections helps visually distinguish the sections.
You can adjust the spacing between bars and segments in the “Bars” settings of our Line, Bar, Pie template.
Another way to separate series and make them easier to understand without having to rely on color is to split them out into a grid of charts. In Flourish, you can choose whether you’d like to display your visualization as a single chart or as a grid of charts with a single click.
3. Stories, motion and audio
Another consideration around visualization accessibility is animation. On the one hand, animation can make data stories more engaging for large audiences, for example via social media videos. Animation can also reduce the cognitive burden when transitioning between different views of the same data by providing object constancy. This is especially useful in the context of a Flourish “story”, which makes it possible to present a detailed data presentation without relying on lots of user interaction, which may present accessibility challenges for some viewers.
Animation is a double-edged sword, however. Moving text isn’t good for screen readers and in some cases motion may even create problems for people with visually triggered vestibular disorders. So it’s important to be judicious on when and how to use animation. Where you do choose an animating approach remember to add a screen-reader fallback description.
Animating charts such as this by Joe Biden's team one can make data stories more engaging for large audiences, but moving graphics can also present accessibility issues.
Talkies
Talkies allow you to add a narrative layer to your Flourish stories. This can be used as a how-to-read guide, or to talk users through a set of views that support your story. Audio is a great way to enrich visual storytelling and bridge the gap between the exploration and explanation of data. It also opens up a whole new accessibility layer for users with limited sight.
Example Talkie by Katie Riley
That’s it for this initial overview of how to make your visualizations more accessible. At Flourish HQ we’re aware we still have a long way to go in this area, so we’d love to hear your suggestions and feedback on the topic. Feel free to get in touch via Twitter or email!