Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Working examples with highcharter accessibility module #48

Open
batpigandme opened this issue Oct 27, 2021 · 1 comment
Open

Working examples with highcharter accessibility module #48

batpigandme opened this issue Oct 27, 2021 · 1 comment
Labels
enhancement New feature or request

Comments

@batpigandme
Copy link

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.

@spcanelon spcanelon added the enhancement New feature or request label Oct 28, 2021
@batpigandme
Copy link
Author

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.")

spcanelon added a commit that referenced this issue Nov 13, 2021
blog: dataviz a11y: add link to highcharter example (#48)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants