Adventures with {highcharter} and the Highcharts accessibility module

Mara Averick

2022-03-09

About me 👋

  • Mara Averick
  • Developer Advocate, RStudio 👩‍💻
  • Missoula, MT 🏔️

Things I did not create:

n.b. The above list is not exhaustive.

Highcharts® JS

Highcharts…is a pure JavaScript charting library based on SVG that makes it easy for developers to create responsive, interactive and accessible charts.

Screenshot of highcharts JS page, shows an example chart of distribution of icebergs.

highcharter

hexagon logo for the highcharter package.

highcharter is an R wrapper for Highcharts JavaScript library and its modules.

Screenshot of highcharts r package homepage.

Background / inspiration

Resources for Data Viz Accessibility by Silvia Canelón

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

Motivating example

Keyboard navigation (accessibility setting) not working #707

Now with working keyboard navigation! 🎉

My journey

Start point Resources for Data Viz Accessibility, Finish point five blog posts on accessibility with Highcharts and highcharter

Start: Reading Silvia’s Resources for Data Viz Accessibility.

Finish: Writing a 5-part series on highcharter and the Highcharts accessibility module.

My journey

Start point Resources for Data Viz Accessibility, Finish point five blog posts on accessibility with Highcharts and highcharter. Annotation pointing to Finish reads: Accessible Highcharts examples created with highcharter and working R code.

Blog post series: Accessible Highcharts examples re-created in R using the {highcharter} package, with code and commentary!

My journey

Start point Resources for Data Viz Accessibility, Finish point five blog posts on accessibility with Highcharts and highcharter. Annotation pointing to Finish reads: Accessible Highcharts examples created with highcharter and working R code. Annotation pointing to center of line connecting start and finish reads: Me learning things along the way.

Between the start and finish, I learned a bunch of useful (non-code or framework-specific) things about accessibility…

My journey

Start point Resources for Data Viz Accessibility, Finish point five blog posts on accessibility with Highcharts and highcharter. Annotation pointing to Finish reads: Accessible Highcharts examples created with highcharter and working R code. Annotation pointing to center of line connecting start and finish reads: Me learning things along the way.  Red line pointing to that annotation read THIS TALK.

Spoiler alert: This talk focuses on those lessons learned.

Highcharts & accessibility: Product

Key selling point! (Highsoft AS 2021a)

Features:

  • Keyboard navigation
  • Screen-reader optimization
  • Low-vision features
  • Sonification
  • Voice input
  • Tactile export

Cover of white paper entitled Gaining competitive advantage through accessible web applications by Highsoft AS copyright 2021.

Highcharts & accessibility: Background

Collaboration with Elsevier, feat. Øystein Moseng (Highsoft) and Ted Gies (Elsevier)

  • Accessibility-Expert and User Testing

“This innovation allows me to interact with the chart and understand the relationships of all the components of the chart to all other components rather than just getting a description of the chart”

Lucy Greco, Web Accessibility Evangelist, Highcharts test user (in (Bert and Hayes 2018))

Highcharts & accessibility: Background

Øystein Moseng and Ted Gies presentations at CSUN Assistive Technology Conference(s)

Highcharts & accessibility: Background

Collaboration with Georgia Tech Sonification Lab (Cantrell, Walker, and Moseng 2021)

Keyboard Navigation

…users are able to navigate and interact with the data points, chart menu, and other chart controls using the keyboard only.

Access to data as table and/or for export

Users preferred this when data was simple (Moseng and Gies 2016).

Sonification

Voice input

Screen-reader accessibility

Perfect?

Emoticon of someone smiling and shrugging.

Impressive?

100 emoji.

* Or at least way better than I’d be able to do myself

Assistive technology and the accessibility tree

Flow from application UI to accessibility tree to assistive technology to user.

Source: Accessibility Object Model Explainer (Boxhall et al. 2021)

UI via assistive technology: example

A full round trip from UI element to accessibility node to assistive technology to user to user keypress to accessibility API action method back to UI element. 1. app translates UI into accessibility node. 2. VoiceOver visits accessibility node. 3. VoiceOver announces refresh button. 4. User presses control option spacebar. 5. VoiceOver calls accessibilityPerformPress. 6. click event routed back to UI element.

Source: Accessibility Object Model Explainer (Boxhall et al. 2021)

Accessibility tree in the browser

HTML translated into DOM tree translated which can be read/modified by JavaScript, DOM tree is then translated into visual UI and accessibility tree in parallel, which is read by native assistive technology API and accessed by the user.

Source: Accessibility Object Model Explainer (Boxhall et al. 2021)

Accessibility-module magic

Accessibility-module magic

Inspect the HTML → “hidden” screen-reader region

<div id="highcharts-screen-reader-region-before-0" 
aria-label="Chart screen reader information." role="region" 
aria-hidden="false" style="position: relative;"></div>

This is where Ted and the developers added the structure description of chart that could benefit screen reader users, such as the chart type, axis information (automatically generated), and a long description of what is found in the chart (supplied by the chart creator) (Bert and Hayes 2018)

screenReaderSection

Default format:

<{headingTagName}>{chartTitle}</{headingTagName}>
<div>{typeDescription}</div>
<div>{chartSubtitle}</div>
<div>{chartLongdesc}</div>
<div>{playAsSoundButton}</div>
<div>{viewTableButton}</div>
<div>{xAxisDescription}</div>
<div>{yAxisDescription}</div>
<div>{annotationsTitle}{annotationsList}</div>

Our penguins screenReaderSection

Title and chart info:

<p>Flipper length vs. bill length in {palmerpenguins}</p>
<div>Scatter chart with 3 data series.</div>
<div>Grouped by species: Adelie, Chinstrap, and Gentoo</div>

Axis descriptions and ranges:

<div>The chart has 1 X axis displaying flipper length in millimeters. Range: 171.41 to 231.59.</div>
<div>The chart has 1 Y axis displaying bill length in millimeters. Range: 30 to 70.</div>

Annotations:

<div>Chart annotations summary
<ul>
<li>A Chinstrap penguin observation mapping to a flipper length of 201mm and bill length of 54.2mm.</li>
</ul>
</div>

{chartLongdesc}

Where you are most irreplaceable!

What belongs there?

It depends…

Provide a text summary of the visualization, making sure to describe trends or patterns in the visualization. (Moseng 2021)

Different descriptions, different kinds of content

Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content (Lundgard and Satyanarayan 2022)

  1. Elemental and Encoded Properties
  2. Statistical Concepts and Relations
  3. Perceptual and Cognitive Phenomena
  4. Contextual and Domain-Specific Insights

Different descriptions, different kinds of content

Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content (Lundgard and Satyanarayan 2022)

Descriptions are important to both [blind and sighted] reader groups

Reader groups differ significantly on which semantic content they rank as most useful

Access to meaningful information is strongly reader-specific

Lessons learned…

  • Use tools
  • Don’t rely on tools
  • Accessibility isn’t “one size fits all”
  • Look to the experts
  • Get feedback
  • Keep learning

R code and working examples

Resources

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. February 18, 2018. https://www.elsevier.com/connect/making-charts-accessible-for-people-with-visual-impairments.
Boxhall, Alice, James Craig, Dominic Mazzoni, and Alexander Surkov. 2021. “The Accessibility Object Model: Explainer.” The Accessibility Object Model (AOM). WICG. https://wicg.github.io/aom/explainer.html.
Canelón, Silvia. 2021. “Resources for Data Viz Accessibility.” September 23, 2021. https://silvia.rbind.io/blog/2021-curated-compilations/01-data-viz-a11y/.
Cantrell, Stanley J, Bruce N Walker, and Øystein Moseng. 2021. “Highcharts Sonification Studio: An Online, Open-Source, Extensible, and Accessible Data Sonification Tool.” In The 26th International Conference on Auditory Display (ICAD 2021), 7.
Gies, Ted, and Øystein Moseng. 2019. “Highcharts - The Next Chapter.” Presented at the CSUN 2019, March 14. https://www.slideshare.net/tedgies/highcharts-the-next-chapter-csun-2019.
———. 2020. “Accessible Visualizations: Maps, Annotations, and Spark Lines.” Presented at the CSUN 2020, March 11. https://www.slideshare.net/tedgies/csun-2020-accessible-visualizations-maps-annotations-and-spark-lines.
Göransson, Daniel. 2017. “Alt-Texts: The Ultimate Guide.” Axess Lab. October 15, 2017. https://axesslab.com/alt-texts/.
Highsoft AS. 2021a. “Gaining Competitive Advantage Through Accessible Web Applications.” White Paper. https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2021/02/18092938/A11y-Whitepaper-Gaining-competitive-advantage-through-accessible-web-applications.pdf.
———. 2021b. Highcharts JS (version 9.1.0). https://www.highcharts.com/products/highcharts/.
Kunst, Joshua. 2021. Highcharter: A Wrapper for the ’Highcharts’ Library (version 0.8.2). https://jkunst.com/highcharter/.
Lundgard, Alan, and Arvind Satyanarayan. 2022. “Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content.” IEEE Transactions on Visualization and Computer Graphics 28 (1): 1073–83. https://doi.org/10.1109/TVCG.2021.3114770.
Moseng, Øystein. 2021. “10 Guidelines for DataViz Accessibility.” Highcharts. 2021. https://www.highcharts.com/blog/tutorials/10-guidelines-for-dataviz-accessibility/.
Moseng, Øystein, and Ted Gies. 2016. “Acessible SVG Charts Using ARIA.” Presented at the CSUN 2016, March 4. https://www.slideshare.net/tedgies/accessible-svg-charts-using-aria-2016.