spcanelon / silvia

Personal website of Silvia Canelón
https://silviacanelon.com
Other
70 stars 29 forks source link

Working examples with highcharter accessibility module #48

Open batpigandme opened 2 years ago

batpigandme commented 2 years ago

Hi Silvia,

Just sent you a message through your blog contact (don't know why I didn't think to come here first), but the accessibility module does work with the highcharter package. Along with text descriptions for the ranges, chart trend, etc., you need to add the accessibility module as a dependency with hc_add_dependency(name = "modules/accessibility.js"), and enable accessibility with keyboard navigation in hc_plotOptions() (and the export module with accessibility turned on, if that's a feature you want). Partial code looks something like:

# insert your highchart object here
hc_exporting(
    enabled = TRUE,
    accessibility = list(
      enabled = TRUE
    )
  ) %>%
 hc_plotOptions(
    accessibility = list(
         enabled = TRUE,
         keyboardNavigation = list(enabled = TRUE)
    )
)

I have working examples of the Highcharts accessible pie chart demo and the Highcharts accessible line chart demo in this GitHub repo, https://github.com/batpigandme/accessible-highcharter. The code for those two is pretty lengthy, since they use different pattern fills and line styles, respectively, for each item/series. Doing them without those features is much more R-like (i.e. you can make better use of the dataframe), and still gives you the nice screenreader sections in the resulting html, as well as the keyboard navigation.

batpigandme commented 2 years ago

Here's an MWE of the chart you had before. If you check out the html generated, the hidden screenreader div is really neat—it gives you the ranges for the axes, etc. (and you can enhance it more by adding explicit axis descriptions, etc.).

library(highcharter)
library(palmerpenguins)

hchart(penguins, "scatter", hcaes(x = flipper_length_mm,
                                  y = bill_length_mm,
                                  group = species),
       color = c("darkorange", "purple", "#057276")) %>%
  hc_add_theme(
    hc_theme(chart = list(backgroundColor = "white"))) %>%
  hc_add_dependency(name = "modules/accessibility.js") %>%
  hc_exporting(
    enabled = TRUE,
    accessibility = list(
      enabled = TRUE
    )
  ) %>%
  hc_plotOptions(
    accessibility = list(
      enabled = TRUE,
      keyboardNavigation = list(enabled = TRUE)
    )
  ) %>%
  hc_caption(text = "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.")