Resources for Data Viz Accessibility

A selection of general and R-specific resources on how and why to make accessible data visualizations.

R
data viz
a11y
ggpattern
highcharter
Author

Silvia Canelón

Published

September 23, 2021

Modified

November 19, 2021

Updated on 2021-11-19 to include a link to a series of educational blog posts written by Mara Averick that cover {highcharter} and the accessibility module in detail. Thank you Mara!

General resources

  • Note: There is an extensive list of data viz accessibility resources at https://github.com/dataviza11y/resources/blob/main/README.md

  • Article by Doug Schepers that provides great background on data viz accessibility, explains how data visualization itself is assistive technology, and offers considerations for a variety of readers: Why Accessibility Is at the Heart of Data Visualization

  • The Chartability methodology helps data viz practitioners audit their data viz, and it’s language/tool-agnostic. Chartability was created by Frank Elavsky with input from the broader community and is the most thorough set of standards I’ve come across.

  • Øystein Moseng provides some basic practices to consider in the post 10 Guidelines for DataViz Accessibility. Among those included are these two which I don’t see covered as often:

    • Do not rely on color alone to convey information. I’ve also heard this referred to as “color independence” and in some cases as “dual-encoding” of information

    • Prefer simple, familiar visualizations over complex novelties.

      The pie chart using color and pattern to differentiate between slices. This screenshot also demos an interactive chart element in action: hovering over one pie slice enlarges the slice, reveals more information about the selected slice, and dims the non-selected slices.

      Pie chart from Øystein’s post using color and (optional) patterns to encode information

  • Talk at the Data Visualization Society’s Outlier conference earlier this year, by Frank Elavsky, Larene Le Gassick, and Sarah Fossheim: Are your visualizations excluding people?

  • Guidelines by Amy Cesal on how to write alt text for data visualizations: Writing Alt Text for Data Visualization

    Example alt text format that reads: Chart type of type of data where reason for including chart. Also the recommendation to include a link to the data source somewhere in the text.

    Example template from Amy’s post

  • Post by Lisa Charlotte Muth on how to pick colors for your data viz that everyone can appreciate: How to pick more beautiful colors for your data visualizations - Datawrapper Blog

    The first pie chart uses colors of similar lightness that end up appearing the same when checked under grayscale simulation. The first option for improvement picks different colors that all stand out from one another in grayscale. The second option keeps the original colors but delineates pie slices with a contrasting border.

    Example from Charlotte’s post of two different approaches to improving a pie chart

  • Post by Gareth Ford Williams from The Readability Group about how to make more informed font choices: A Guide to Understanding What Makes a Typeface Accessible

    • Related is a talk from The Readability Group sharing findings from a survey study about font preferences including 2000+ participants. Among these were participants with dyslexia characteristics and participants with poor near vision: Don’t Believe the Type!

      The fonts selected most often in this group were San Francisco Pro, Red Hat Text, Calibri, and Segoe UI, in that order. San Francisco Pro was selected by 68% of participants The fonts selected least often were Open Dyslexic, Dyslexie, Comic Sans MS, and Sylexiad Sans. Open Dyslexic was selected by 12% of participants. Both Times New Roman and Helvetica are highlighted as showing the largest differences between users with poor near vision and those without. Times New Roman was the 6th least selected and Helvetica was in the middle learning towards the most selected fonts.

      Bar graph showing the frequency by which 20 different fonts were selected by study participants with strong poor near vision in comparison with users with no poor near vision.

  • Sarah Fossheim authored a post titled An intro to designing accessible data visualizations which uses real-word applications to demonstrate 10 different accessibility practices.

    Sarah also provides a code-through showing how to make screenreader-friendly graphs using D3.js in their post How to create a screen reader accessible graph like Apple’s with D3.js

  • Amber Thomas provides an example of how to make scrollytales more accessible in a piece created with Ofunne Amaka for The Pudding: The Naked Truth

  • Chris DeMartini has a series of blog posts documenting his journey auditing one of his public Tableau visualizations for accessibility:

    1. A Tableau Accessibility Journey
    2. Focus Order
    3. Color Contrast and Font Size
    4. Keyboard Accessibility

    The user is using a kind of selection tool to hover over an area of the visualization, in this case the title, and check font color contrast against its background. The tool pulls up details along the bottom of the page, including WCAG pass/fail test results, background and foreground color hex codes, and other color characteristics.

    Title of Chris’s Tableau visualization being checked for color contrast.

R resources

  • Liz Hare and I gave a talk earlier this year on alt text in data viz shared as a part of TidyTuesday on Twitter. After web-scraping alt text from TidyTuesday tweets we found that only 3% of data viz tweets had alt text to accompany them (over the first 3 years of the TidyTuesday project). Links to the video recording, slides, and resources at https://github.com/spcanelon/csvConf2021. The talk includes guidelines on what makes effective alt text for data viz (complementary to those Amy Cesal includes in her post).

    Effective alt includes a description that conveys meaning in the data, variables on the axes, scale described within the description, description of the type of plot. Direct link to slide: https://spcanelon.github.io/csvConf2021/slides/indexLH.html#11

    Slide from our presentation summarizing the most useful alt-text features found among 196 data viz tweets

  • Post from RStudio on how to add alt text to visualizations produced in R Markdown using code chunk option fig.alt: New in knitr: Improved accessibility with image alt text.
    New in knitr v1.35: You can now add code chunk options inside the code chunk!

    Example updated thanks to a heads-up from Garrick:

    #| fig.cap: Bigger flippers, bigger bills 
#| fig.alt: Scatterplot of flipper length by bill length of 3 penguin species, where we show penguins with bigger flippers have bigger bills.

ggplot(data = penguins, aes(x = flipper_length_mm,
                            y = bill_length_mm,
                            color = species)) +
  geom_point(aes(shape = species), alpha = 0.8) +
  scale_color_manual(
    values = c("darkorange","purple","cyan4"))

    Code chunk adapted from the RStudio blog post

    The previous example included fig.cap and fig.alt in the code chunk heading:

    Scatterplot of flipper length by bill length of 3 penguin species, where we show penguins with bigger flippers have bigger bills.

    Bigger flippers, bigger bills

  • The ggpattern R package developed by Mike FC supports filling ggplot2 geometries with patterns. If used judiciously, patterns can help make visualizations more accessible by providing an additional way to encode information without relying on color. Below is one example using ggpattern v0.2.2:

    library(ggpattern)

penguinColors <- c("darkorange", "purple", "cyan4")

ggplot(penguins, aes(species)) +
geom_bar_pattern(aes(fill = species,
                    pattern = species,
                    pattern_color = species),
  fill = penguinColors,
  alpha = 0.1,
  linewidth = 1,
  color = penguinColors,
  pattern_color = penguinColors,
  pattern_fill = penguinColors,
  pattern_spacing = 0.025
) +
theme_minimal() +
theme(legend.position = 'none')

    Bar chart showing 3 penguin species along the x axis and the number of observations on the y axis. The bar for the Adelie species uses the color orange and diagonal stripes, the bar for Chinstrap species uses the color purple and crosshatches, and the bar for the Gentoo species uses the color cyan and a dotted pattern.

    Different patterns mapped onto penguin species along with different colors

  • The Highcharter R package developed by Joshua Kunst adds interactivity to data viz using Highcharts JavaScript components designed with web accessibility in mind. The package has a learning curve, but lucky for us Mara Averick wrote an excellent series of blog posts on using the Highcharts accessibility module with {highcharter}.

    Scatterplot of the palmerpenguins dataset showing data points clustered by species and the highcharter package making it possible to focus on one cluster and identify the x and y values of a specific data point. In this case the data point is a Chinstrap penguin observation mapping to a flipper length of 201mm and bill length of 54.2mm. Explore this data viz with a screen reader in Mara's blog post: https://dataand.me/posts/2021-11-15-accessible-highcharter-part-4/#an-accessible-penguin-plot

    Interactive scatterplot from Mara’s post using color and shape to encode information about penguin species
Back to top

Reuse

Citation

For attribution, please cite this work as:
Canelón, Silvia. 2021. “Resources for Data Viz Accessibility.” September 23, 2021. https://silviacanelon.com/blog/2021-09-23-data-viz-a11y/.