Adventures with the Highcharts accessibility module: Part 1

Over the past few weeks I’ve been experimenting with the accessibility module from Highcharts using the {highcharter} package by Joshua Kunst. Highcharts is an SVG-based library for making interactive charts for the web. {highcharter} is an R package that wraps the Highcharts JavaScript library and its modules (Kunst 2021).

One of the things I like about {highcharter} is how it really mirrors the native API (which you can learn more about in its vignette on the topic, JavaScript API basics). Because they’re so closely tied together, all of the Highcharts documentation, in effect, becomes {highcharter} documentation. So, my “experiments” have largely consisted of converting examples from the former into the latter.

In this post, we’ll give a broad overview of the accessibility module, motivating examples, and make a basic, working example with keyboard navigation enabled.

Highcharts ∩ accessibility

Highcharts has fairly extensive accessibility features, and has engaged in some interesting collaborations and research on making data visualizations accessible, especially for those with visual impairments (Bert and Hayes 2018).

The Highcharts accessibility module enables a number of features—most notably usability through keyboard navigation and screen reader technologies. Though not part of the accessibility module, their accessible demo charts also make use of patterns and dash styles to improve contrast for those with colour blindness.

R accessibility resources and motivating examples

Silvia Canelón recently posted Resources for Data Viz Accessibility:

A selection of general and R-specific resources on how and why to make accessible data visualizations (Canelón 2021).

I highly recommend taking a look at the presentation she gave with Dr. Elizabeth Hare at csv,conf,v6 (Canelón and Hare 2021).

I noticed that, at the time (it had been last updated on 2021-10-14), it suggested that the accessibility module didn’t work with {highcharter}, and linked to a couple of GitHub issues in its repo (specifically #707, and #719) where unsuccessful in getting accessibility features to work through {highcharter}.

Having worked with {highcharter} a bit in the past, and knowing that “if you can do it in Highcharts, you can do it with {highcharter}” usually holds true, I thought I’d give it a whirl.

I also vaguely remembered that figuring out the 1:1 relationship between Highcharts and {highcharter} took a while last time around.

Guiding principles

There are a couple of principles I try to follow when figuring out coding “problems”—both of which are probably just ersatz versions of Jenny Bryan’s reprex do’s and don’ts.

1. Isolate your variables. Like many of the interactive (usually JavaScript-based) charting packages in R, {highcharter} works with {shiny}¹. However, you can also use {highcharter} without shiny (e.g. in an R Markdown document like this one) and still get a lovely, interactive visualization in the form of an htmlwidget. Since my goal was to see if I could get the accessibility module to work with {highcharter}, I didn’t want to introduce shiny into the equation as an “extraneous” variable.

2. Follow a working example. Between the {highcharter} site and the Highcharts demos (all of which have options to edit in CodePen and JSFiddle), there is no shortage of working examples available with code! Though I know very little about JavaScript, the aforementioned resemblance between the Highcharts JS API and {highcharter} syntax make reading the “foreign” source code incredibly helpful ².

Getting started…

As I came to discover, the first example in Highcharts’ Getting started with accessibility documentation (an accessible line chart) is actually somewhat complex from an R user’s standpoint. However, my plan was to mimic the examples from the Highcharts docs. So, it’s where I began.

Over in the land of {highcharter} documentation, I gave the Modules & plugins vignette a careful reading, since I’d be making use of at least one module (plus a few more, as I came to discover).

Because this missive has already gotten a bit long, I’m going to save the full line-chart example for a later post. However, something mentioned at the beginning of the Getting started docs turned out to be crucial to solving the mystery of Issue #707—the inclusion of the exporting and the export-data modules.

Keyboard navigation

There’s much more to accessibility than keyboard navigation.³ But it is a nice feature, and it was the ask of the aforementioned issue (which turns out to be relatively concise example, and is what I’ll show you below).

The original poster (@jenfly) does a nice, precise job of describing the desired keyboard navigation seen in the native Highcharts API example on CodePen:

when I use the Tab key in the Codepen output, the focus ring goes first to the “something focusable” link, then to the first bar in the chart, where I can use the right arrow to navigate through the bars (allowing a screen reader to read each one, for example), and if I press tab again, it goes to the legend, then to the context menu button, and finally to the generic “Button” I included at the bottom of the page (Walker 2021).

As with all things code, there’s more than one way to get the same thing done—I most definitely have not fully sussed out how much the order in which you put functions makes a difference. However, the following elements of my code are key (if you will) to getting the above behavior working.

1. Include all of the modules (accessibility, exporting, and exporting-data) used in the example with hc_add_dependency(). Even though using the hc_exporting() function brings the exporting module along, the explicit reference seems to make the next bit possible.

2. Expressly enable accessibility for exporting. Yes, exporting has its own accessibility option in the JavaScript API, and you need to enable this option in addition to enabling keyboard navigation for the chart as a whole to be able to tab over to the exporting menu.

Working example

So, with those two keys in mind, here is a the fruits chart with keyboard navigation enabled:

# library(highcharter)
data <- data.frame(
    fruit = c("apple", "banana", "orange", "pear"),
    count = c(2, 3, 5, 4)
    )

highchart() |> 
  hc_add_dependency(name = "modules/accessibility.js") |> 
  hc_add_dependency(name = "modules/exporting.js") |> 
  hc_add_dependency(name = "modules/export-data.js") |> 
  hc_title(text = "Fruits") |> 
  hc_xAxis(categories = data$fruit) |> 
  hc_add_series(
    data = data$count,
    type = "column",
    name = "Count"
  ) |> 
  hc_exporting(
    enabled = TRUE,
    accessibility = list(
      enabled = TRUE
    )
  ) |> 
    hc_plotOptions(
      accessibility = list(
        enabled = TRUE,
        keyboardNavigation = list(enabled = TRUE)
    )
  )

I’ve also re-created the Fruits example on its own (with source code available here), so you won’t have to tab through the other links in this article to see it in action.

Fin

We’ve just scratched the surface of what can be done with the Highcharts accessibility module. Next time we’ll take a step-by-step look at recreating Highcharts’ accessible line chart demo.

References

Bert, Alison, and Lisa Marie Hayes. 2018. “Making Charts Accessible for People with Visual Impairments: A Collaboration Between Elsevier and Highcharts Sets a New Standard for Chart Accessibility.” Elsevier Connect. https://www.elsevier.com/connect/making-charts-accessible-for-people-with-visual-impairments.

Canelón, Silvia. 2021. “Resources for Data Viz Accessibility.” https://silvia.rbind.io/blog/2021-curated-compilations/01-data-viz-a11y/.

Canelón, Silvia, and Elizabeth Hare. 2021. “Revealing Room for Improvement in Accessibility Within a Social Media Data Visualization Learning Community.” https://silvia.rbind.io/talk/2021-05-04-data-viz-accessibility/.

Kunst, Joshua. 2021. Highcharter: A Wrapper for the ’Highcharts’ Library. https://jkunst.com/highcharter.

Walker, Jennifer. 2021. Highcharter. https://github.com/jbkunst/highcharter/issues/707#issue-891688128; GitHub.

Footnotes

1. See the highcharter Shiny examples vignette for details.

2. I also copied these examples to my machine as stand-alone applications to ensure I could make them work outside of the online editors

3. In fact, I wouldn’t necessarily call the following example “accessible” per se, since it doesn’t make use of some of the features to subsequently in this series.