A core tenet of journalism is to provide truthful, factual information in order to hold those in power to account. Data journalism is no different, though its practitioners may use a different set of tools to collect, investigate, and express that information. In addition to typically written stories, data journalists have a wide range of demonstrative forms at their disposal, including static visualisations, interactive apps, and data tables.
Though each of these additional storytelling formats can immeasurably enhance a story, they also present barriers to the audience. Not only is it possible that readers cannot physically view a data visualisation due to visual impairments, but it’s also important to consider that users may simply be unfamiliar with how to read and digest such assets.
In an effort to make journalistic content as widely read as possible, it is essential to take steps towards more accessible data visualisation practices. Whether accommodating readers who cannot see the work in the same way the journalist does or adjusting conventions to ensure the reader is adequately guided through the information, making data visualisations more accessible enhances the audience experience for all those who interact with the work.
How do you make data visualisations accessible to the visually impaired?
It’s estimated that about 10% of the global population lives with a disability of some kind, totalling approximately 650 million people. Beyond those individuals, about 2.2 billion people globally have some form of blindness or visual impairment, making its prevalence a staggering one in four people.
Though data journalists are often working on a short timeline, excluding a quarter of the population from being able to easily and accurately read the news is a clear oversight and prevents people from being informed about the world around them. Luckily, many simple changes can be made to data visualisations and other multimedia news assets to address this disparity.
How does colour blindness impact data visualisation?
Colour blindness exists in many forms, including red-green colour blindness, blue-yellow colour blindness, and total colour blindness. Each of these conditions comes with its own set of challenges, but they all impact the way that a person sees the hue of a colour or the perceived difference in light wavelengths reflected by the colour. Due to this commonality, similar techniques can be employed to help accommodate all types of colour blindness.
This image shows two hue scales side by side. The scale on the left begins black at the top and fades through increasingly lighter shades of grey until it is white at the bottom. The scale on the right is a rainbow, beginning with red at the top and fading through orange, yellow, green, blue, indigo, and violet before returning to red.
First, because colour blindness only impacts the way that hue is perceived, other aspects of colour can be manipulated instead in order to make the visualisation accessible to those who struggle to differentiate between hues. One such aspect is the brightness, or brilliance, of a colour. Brightness is the perceived difference in light amplitude reflected by the colour and can make colours appear more or less intense.
This image shows a rainbow of six colours and what those colours look like with the hue, or colour, taken out of them. It is difficult to tell the difference between green and blue and red and pink in the grayscale version of the colours, demonstrating what a colour blind person might observe.
Source: Mixing Colours of Equal Luminance — Part 2 | by Colin Shanley | Design + Sketch | Medium
By ensuring that the colours in a data visualisation are adequately different in brightness, colour-blind people will have less difficulty discerning which marks in the visualisation correspond to different information. In order to test whether your colour scheme is adequately diverse in brightness, use a colour blindness simulator like Coblis. Simply upload an image of your visualisation or colour scheme and then use the selection criteria at the top to see how that image would appear to a person with various forms of colour blindness. If the colours appear too similar, adjust your colour scheme to differentiate them more.
This image is a screenshot of Coblis showing what a photo of a pile of crayons looks like with full-colour vision and with one type of colour blindness.
In addition to independently checking colour schemes, some data visualisation tools have built-in functions for testing the accessibility of images for people with colour blindness. Datawrapper provides the ability to toggle between views demonstrating some types of colour blindness so that users can ensure their visualisation is accessible before publishing.
This image is a screenshot of the Datawrapper tool that can show users how their data visualisation looks to people with various forms of colour blindness.
Source: Datawrapper
Though colour is an excellent tool for those with full-colour vision, it obviously has many limitations. To further increase the accessibility of a data visualisation, experiment with visual cues other than colour in order to differentiate categories of information. Utilising patterns and textures is a fantastic way to demarcate a range of data when colour alone isn’t sufficient. Adding dots, stripes, hash marks, and other shapes avoids the issue of colour similarity entirely.
This image shows a line chart that uses both texture and colour to indicate which line corresponds to which function.
Source: Two Simple Steps to Create Colorblind-Friendly Data Visualizations | by CR Ferreira
To take it a step further, separate all your data categories with a high-contrast border, ensuring that no two colours are placed directly against each other. This circumvents the issue of simultaneous contrast, which is when two colours placed directly next to each other change the way the hue and brightness of those two colours are perceived by the human eye.
This image shows an illusion that demonstrates how simultaneous contrast changes the way colours are perceived. All reds are the same shade of red, and all greens are the same shade of greens throughout the image despite appearing different.
Source: What is simultaneous contrast
How can completely blind people access data visualisations?
To be inclusive of those who are completely blind, it’s essential to provide non-visual translations of data visualisations. The most straightforward tool for beginning this process is alt text. “Alt text” stands for “alternative text” and is a brief description of the image that can be read by a user, either visually or with a screen reader, if the image cannot be viewed.
This image shows a screenshot of the alt text for the image in a tweet by the Data Visualization Society.
Source: https://twitter.com/DataVizSociety/status/1594737490589515785
There are advantages to alt text beyond physical accessibility, including a boost in SEO value and the ability for people with slow internet connections to know what an image contains even if the full file will not render. In general, it is best to keep alt text succinct and descriptive, providing just enough information to substitute for the image. Avoid repeating words, and be sure to include a reference to any text in the image. For data visualisations, the title of the visualisation along with a mention of the form of the image (bar chart, map, etc.), is a great place to begin.
People who access information with a screen reader not only rely on alt text to describe images to them but also often navigate web pages with a keyboard or other button-based device instead of using a mouse or trackpad. Though this is not a problem for static data visualisations, it often becomes complicated when working with interactive media.
The main culprit of this difficulty is the hover function. Though showing a tooltip, revealing a factoid, or providing other information when the mouse hovers over a particular spot is visually striking, there is no equivalent action for a person exclusively using a keyboard. As a result, those who use screen readers are almost always unable to access these functions.
This image shows a bar chart from a story by the Pudding about who is represented on banknotes. When the mouse hovers over a dot on the bar, more information is given in a tooltip about who that dot represents.
Source: Who’s in Your Wallet?
Instead of using a hover function, allow users to click on objects in interactive visualisations in order to access information. Alternatively, think about whether the information could be integrated or displayed without action from the user. Lastly, always question whether the information needs to be directly in the data visualisation or if it could be provided in an accompanying table, caption, or additional visualisation.
In general, the more places where descriptions of data visualisations can be provided, the better. When feasible, include longer descriptions of images and data visualisations in captions or directly in the copy of the story. These locations allow the journalist to have more freedom with the detail of the description than can necessarily be achieved with alt text alone and are more easily read by a screen reader.
Although screen readers are a fantastic tool that allow blind and visually impaired people to access most web content, having an audio version of a story is an even better format. The audio version should not only contain a reading of the article but also include spoken descriptions of any accompanying images, data visualisations, and multimedia. For an example, check out the audio recording of this article.
Finally, as the world of data visualisation has become more expansive, data sonification has entered the field. Data sonification is exactly what it sounds like: using sound to demonstrate patterns or stories in data. One great example is this sonification of earthquakes in Oklahoma, made by Reveal.
How do you make data visualisations more accessible for everyone?
Beyond providing accessible content to those with physical disabilities, journalists should always strive to make their content digestible for everyday readers. Though it can be difficult for the creator to catch when a visualisation is difficult to read or confusing for the average user, there are a number of design aspects that journalists and editors can consciously consider to help determine whether the data visualisation needs to be revised.
How do font sizes impact reader engagement with data visualisations?
In the age of technology, font sizes may seem irrelevant when zooming in on a web page is an option. However, data visualisations are most effective when the viewer can see the entire image at the same time. Zooming in and out on titles, data labels, and other text can interrupt the viewing experience and potentially cause readers to simply scroll past.
When possible, create visualisations with large enough text to read easily on both computer screens and smartphones. Mobile browsing makes up more than half of all internet usage, so providing data visualisations that are smartphone-compatible is essential to content accessibility. If creating a mobile version of the visualisation is impossible for any reason, make sure to note alongside the image or interactive component that the data visualisation can only be fully viewed on a desktop or laptop computer.
Though requiring users to zoom in on images should be avoided if possible, always ensure that data visualisation files are posted as a medium to high-quality image for web formats. This allows users to have the ability to make the image as large as they need in the cases when zooming becomes necessary.
How can data visualisations be more visually cohesive?
Each data visualisation contains its own visual language, full of colours, patterns, fonts, and more. In order for users to properly read and digest the data visualisation, the visual language used must be cohesive and transparent.
One way to create visual cohesion is to connect colours and patterns to their intuitive meaning. For example, if a journalist was creating a graphic about recycling, they would likely want to use a primarily green colour scheme, as green is already associated with recycling and other efforts to help the natural environment. Similarly, in the instance that a practitioner wanted to create a visualisation of the Great Pyramids in Egypt, they may want to integrate some triangular shapes into their design.
This image shows a bar graph of statewide recycling data in Pennsylvania. The graph utilises a green colour scheme, which readers already associate with recycling and other environment-related projects.
Source: Statewide Recycling Data
In addition to integrating intuitive meanings via colour and pattern, using variations of the same shape throughout a data visualisation can help readers identify the visual language of the image more easily. Depending on the story's topic, the place it will be published, and the tool used to create the visualisation, a data journalist might choose to use more curved lines, sharper angles, or a particular pattern that connects to the topic.
This image shows a data visualisation from Science that repeatedly uses the simplified form of a human to indicate that the research study was about the human genome.
Source: Haplotype-resolved diverse human genomes and integrated analysis of structural variation | Science
With regard to both colour and shape, utilising the power of contrast can help readers understand the relationship between various parts of the data. If two conditions are at odds with each other, like areas with severe drought versus severe flooding, then a contrasting colour scheme will help the reader understand the opposite relationship.
This image shows a world map with each country coloured in a contrasting colour palette depending on its level of hazardous waste generation. Green indicates a lower volume of hazardous waste, and red indicates a higher volume.
Outside of colour and shape, fonts play a significant role in the perceived tone of a data visualisation. A chart with its title written in Comic Sans will most likely be perceived as rudimentary or childish. On the other hand, one that uses Futura may be seen as modern, and one that uses Times New Roman might be considered academic or authoritative. Be sure that the fonts in data visualisations match the topic and intended tone of the image so that readers are poised to digest the information.
This image is an infographic detailing the different tones set using slab serif, sans serif, serif, and modern serif fonts. Each font comes with its own personality, from attention-grabbing to timeless.
Source: Font Psychology: Here's Everything You Need to Know About Fonts - Designmodo
How can data practitioners better guide reader interactions with data visualisations?
Even when data journalists do their best to make the most visually pleasing and cohesive graphics possible, a nearly foolproof method for getting readers to understand a data visualisation is simply writing out instructions. It may seem tedious, but this tactic can be especially useful for more unusual data visualisation formats and complex interactive graphics.
The most basic form of directions in data visualisations is data labels. It is best practice to directly label data points when possible instead of using legends or keys. This technique allows users to see the data label and the data simultaneously instead of forcing them to look at the chart, then at the legend, and back at the chart again. It is also a more compatible format for screen readers in the case of interactive visualisations.
This image shows two versions of the same line graph. The version on the left uses a legend, and the version on the right uses direct labelling, demonstrating the increased cohesiveness that direct labelling provides.
Source: Directly Labeling Your Line Graphs | Depict Data Studio
The next step up from data labels is data visualisation captions. As discussed earlier, providing a description of the data visualisation in a caption is helpful for those using screen readers. However, captions also help visually-able users more easily digest the data. Captions might contain the name of the data visualisation format (especially if it’s unusual), a note about where to look first, or a primary trend represented in the image.
In cases where proper data labels and captions still don’t feel like quite enough information to guide the reader, more extensive instructions can be provided in the form of one or more paragraphs of introductory text before the reader is asked to engage with the visualisation. This would likely only be necessary in the case of a very complex visualisation or interactive web app. If a web app needs to provide users with even more guidance, consider developing some introductory pop-ups to let the reader know what different aspects of the visualisation are intended to do.
This image shows the opening page of an interactive story by the Pudding that has explicit pop-up instructions telling the reader how to navigate the content.
Conclusions
As with all data visualisation methods, accommodating as many users as possible and creating more accessible products is a constant learning experience. Whenever possible, provide as many accommodations as is reasonable for the project and strive to integrate any feedback given by readers moving forward.
To help you create more accessible data visualisations that serve the public, the Lessons learned and Recommended resources sections below provide a short checklist of tips to reference day-to-day and a swath of additional reading materials to expand your knowledge about accessible data visualisation techniques.
Lessons learned
Why is accessible data visualisation important? Data journalists provide insight into the data stories that exist in the world for everyday people. Because those data stories impact everyone, regardless of their ability to process data visualisations, working to create more accessible data visualisation expands the potential audience for a story, ultimately making that story more useful.
How do you make data visualisation accessible? Data visualisation can be made more accessible both by accommodating physical disabilities, like blindness and by tailoring the design to be intuitive for readers based on how humans interact with visual information.
How do you make data visualisations accessible for someone who is visually impaired? Ensuring that your visualisation includes contrasting colours and visual indicators like patterns and textures can make your work more accessible for people who are colour-blind. In the case of a person with total blindness, accommodate screen readers by providing informative alt text, including written descriptions of the visualisation and its trends, and avoiding hover functions in interactive visualisations.
What are three ways to make data visualisations more accessible for everyone? To make data visualisations more reader-friendly even for those with fully-functioning eyesight, take care to make your font sizes easily readable on all screen sizes, promote visual cohesion by connecting colours and shapes in your visualisation to preexisting connotations, and provide explicitly written instructions for how to read the visualisation when necessary.
Recommended resources
Below are lists of various resources that are helpful when learning more about data visualisation accessibility. These lists are provided in addition to the resources linked throughout the above article.
General data visualisation accessibility resources:
- Accessible data visualizations - UW–Madison Information Technology
- Data visualizations | Visual design | Accessibility for Teams
- A Comprehensive Guide to Accessible Data Visualization
- Making data visualization more accessible for blind and low-vision individuals | MIT News 10 Guidelines for DataViz Accessibility – Highcharts
- Resources for Data Viz Accessibility | Silvia Canelón
- An Accessibility-First Approach To Chart Visual Design — Smashing Magazine
- An Incomplete Guide to Accessible Data Visualization | by Nancy Organ
- Color palettes and accessibility features for data visualization | by Shixie | _carbondesign | Medium
- Two Simple Steps to Create Colorblind-Friendly Data Visualizations | by CR Ferreira
Colour resources:
- 12 fascinating optical illusions show how color can trick the eye - The Washington Post)
- Illusions in Data Visualization - Rock Content
- Perception of Colors of Dresses and Data Visualization – Vlamis
- The Fundamentals of Color: Hue, Saturation, And Lightness - Vanseo Design
- Color Contrast Calculator | Think Outside The Slide
How to create data visualisations that serve the public - Making data visualisations accesible to everyone
17 min Click to comment