Mara Averick
2022-03-09
{highcharter} (Kunst 2021)
Highcharts (Highsoft AS 2021b)
n.b. The above list is not exhaustive.
HighchartsâŠis a pure JavaScript charting library based on SVG that makes it easy for developers to create responsive, interactive and accessible charts.
highcharter is an R wrapper for Highcharts JavaScript library and its modules.
src: Joshua Kunst https://jkunst.com/highcharter/
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)
Keyboard navigation (accessibility setting) not working #707
Now with working keyboard navigation! đ
Start: Reading Silviaâs Resources for Data Viz Accessibility.
Finish: Writing a 5-part series on highcharter and the Highcharts accessibility module.
Blog post series: Accessible Highcharts examples re-created in R using the {highcharter} package, with code and commentary!
Between the start and finish, I learned a bunch of useful (non-code or framework-specific) things about accessibilityâŠ
Spoiler alert: This talk focuses on those lessons learned.
Key selling point! (Highsoft AS 2021a)
Features:
Collaboration with Elsevier, feat. Ăystein Moseng (Highsoft) and Ted Gies (Elsevier)
â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))
Ăystein Moseng and Ted Gies presentations at CSUN Assistive Technology Conference(s)
Collaboration with Georgia Tech Sonification Lab (Cantrell, Walker, and Moseng 2021)
âŠusers are able to navigate and interact with the data points, chart menu, and other chart controls using the keyboard only.
Users preferred this when data was simple (Moseng and Gies 2016).
* Or at least way better than Iâd be able to do myself
Source: Accessibility Object Model Explainer (Boxhall et al. 2021)
Accessibility Object Model Explainer https://wicg.github.io/aom/explainer.html
Source: Accessibility Object Model Explainer (Boxhall et al. 2021)
Accessibility Object Model Explainer https://wicg.github.io/aom/explainer.html
Source: Accessibility Object Model Explainer (Boxhall et al. 2021)
Accessibility Object Model Explainer https://wicg.github.io/aom/explainer.html
Blog post: Accessible {highcharter}: Part 4
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:
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:
{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)
Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content (Lundgard and Satyanarayan 2022)
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
Accessible {highcharter} GitHub repo (rendered demos of my charts, and source .Rmd
s) â More useful
GitHub repo for these slides â Less useful
Blog post series:
10 Guidelines for DataViz Accessibility by Ăystein Moseng (Moseng 2021)
Accessible visualization via natural language descriptions by Alan Lundgard and Arvind Satyanarayan (Lundgard and Satyanarayan 2022)
Alt-texts: The Ultimate Guide by Daniel Göransson (Göransson 2017)
The A11y Project â Meta resource