Part Two:
Part Two:
As I wrote about in the first part of this guide, color choice and color design are crucial for making inclusive visualizations. In fact, this is a more pressing concern for data visualization designers than web or print designers. This is because information visualization uses color to convey the meaning of data, not just for aesthetic purposes. If color design is not accessible, some people simply will not be able to ascertain what the data is saying in a visualization.
Because there are so many different types of color deficiencies, it is more practical and inclusive to design visualizations assuming that some viewers will only be able to see in grayscale. There are tools online (linked on the resources page of this site) that allow you to see your visualization with different color deficiency filters. This is an excellent way to check if your designs are accessible to colorblind users. There’s nothing wrong with using color in your visualization, as it is a powerful tool for displaying data variables, but including some additional features can improve the inclusivity of your design.
When it comes to accessible color choice, contrast is key! As explained in part one, high contrast colors are beneficial for all types of color deficiencies. The W3C standards suggest that large text should have at least a 3:1 contrast ratio against the background and smaller text should have at least 4.5:1. This is even more important for information visualization designers who have multiple, sometimes overlapping elements within the same charts. You can easily check the contrast ration of two colors using the tool I provided in the resouces tab.
Borders can also be introduced to provide visual contrast in charts, as can be seen in the example below. These small changes do a lot to improve inclusivity of designs..
These grayscale graphs show how adding high contrast borders between colors helps improve readability, from Nussbaumer Knaflic (2018)
Another very significant consideration is to use direct labeling which includes a written description of what a given colors represents. The labels should be close enough to what they’re labelling that a user can easily understand the connection. Programs such as Tableau automatically generate interactive direct labels which are supported for screen readers. However, it’s important to note that static images taken from visualizations you generate in such software will not support this functionality. As technology progresses in the field of information visualization, more research needs to be done on how to incorporate direct labeling in more complex and advanced visualization designs.
The charts show how helpful direct labelling can be for color-blind audiences, from Nussbaumer Knaflic (2018)
Magnification
Many low-vision users rely on screen magnification to interact with webpages and visualizations. Ensuring that your designs can be magnified or zoomed-in can make them more inclusive. As discussed in part one, this can be part of a larger strategy to make the visualization more interactive and reveal data at several layers of detail, as per Tufte's design principles. A useful tool for scalability is SVGs (scaled vector graphics) which are used in accessible design not only because they are very compatible with magnification, but also because they can be encoded using ARIA roles which allow for compatibility with screen readers.
ARIA standards from the W3C are very important for improving information visualization accessibility for blind audiences as they can be used specifically to annotate charts, graphs, and maps. They even allow for interactivity of charts. Luc Guillemot (2018) published a very informative guide on how to achieve this. His example below shows how interaction instructions can be added to alt-text so that users know how to interact with the visualization.
Graph created by Luc Guillemot to show how alt-text can include instructions for screen readers
Alt-text
Alt text is what a screen reader reads when it encounters an image or graphic. Having descriptive alt-text is the first and most important step for making visualizations inclusive for blind users who rely on screen readers. As mentioned in part one, a shockingly low percentage of visualizations shared across social media contained alt-text. Hopefully the percentage is higher in institutional and professional settings, but it's clear that the information visualization field has a lot of catching up to do in this area.
In addition, designers and publishers should provide a link to the original data table so that users can download it and read it with a screen reader as this is more straightforwad and preferred by some users.
If you want to include useful alt-text in your visualizations, some basic details to include are:
-Chart type
-Type of data
-What the data reveals
Chart with alt-text example, adapted from Cesal (2020)
In Writing Alt Text for Data Visualization (2020), Amy Cesal provides a good example of a possible alt-text description of a New York Times chart showing global gun violence rates. It follows the above formula: “Bar chart of gun murders per 100,000 people, where America’s murder rate is 6 times worse than Canada, and 30 times Australia.” By adding an informative alt-text, users would be able to understand what the data is conveying even if they can’t see the visualization.
Looking towards the future
As more and more students, researchers, and professionals are becoming aware of the need for accessibility in information visualization design, it should be a main priority to establish one set of industry-wide accessibility standards. Having such a basic foundation is necessary as the horizons of information visualization are rapidly expanding. The longer we wait to establish a set of standards, the larger the gap will grow between current understandings of best practices and cutting-edge innovations. Inclusivity and equitable access are the future. We are inevitably heading in the direction of a more inclusive world and information visualization designers are more than welcome to come along for the ride!
Works cited on this page:
ARIA - Accessibility | MDN. (n.d.). Developer.mozilla.org. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Cesal, A. (2021, June 8). Writing Alt Text for Data Visualization. Nightingale. https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81
Guillemot, L. (2021, February 5). How Does This Data Sound? Medium. https://blog.interactivethings.com/how-does-this-data-sound-945ed27a1a95
Nussbaumer Knaflic, C. (2018, June 26). 5 easy ways to make your data visualization more accessible. Storytelling with Data. https://www.storytellingwithdata.com/blog/2018/6/26/accessible-data-viz-is-better-data-viz
SVG Accessibility/ARIA roles for charts. (n.d.). W3C Wiki; W3C. Retrieved July 17, 2024, from https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts
Write Good Alt Text to Describe Images. (2023). Harvard Digital Accessibility Services; Harvard University. https://accessibility.huit.harvard.edu/describe-content-images