This document is on github as part of the work done in the W3C SVG accessibility Community Group - please feel free to contribute.

Highcharts.com's exported screen reader chart

Highsoft.com produce various commercial software tools including the highcharts charting library that creates SVG for modern browsers. Their online demos use a javascript library to provide many accessibility features, and their system also allows export of the graphs in various forms.

Since their work is offered free for non-commercial use, I exported an SVG from one of their online demonstration charts. However it didn't get the accessibility features that come from their javascript. Here's what I have done so far to see how to make it more accessible.

Stage 1:

The "stage 1 snapshot" is pretty much the same diagram. Importantly, there isn't any real visual change, and I have maintained the aria structure which is basically that each line has role="region" and the markers have role="img" except that I use a title with aria-labelledby instead of just an aria-label.

This isn't at all keyboard-navigable - there is tabindex="-1" everywhere. The original with the accessibility script is keyboard navigable, but I haven't yet tried to replicate that.

This version can be more or less explored on windows using NVDA with Chrome, Firefox, using Narrator with IE, and with JAWS using Chrome, Edge or IE.With Narrator and Edge there is a problem getting to the individual data points.

On Mac, I could read the individual datapoints with VoiceOver and Yandex browser but not the g elements with role="region" which do have a title linked using aria-labelledby,  and with Safari I could navigate between the regions, and enter each of them to get the data points.

To get to this stage I made two kinds of change. To make it easier to work with the code, I simplified a lot of it. This was a fairly straightforward task - their code is itself fairly clear.

If you think that's not interesting, feel free to skip to the experiments, which attempt to further improve the accessibility.

Accessibility related changes

Convert from SVG XML file to HTML with inline SVG

IE doesn't provide any accessibility support for SVG XML documents, only inline HTML.

Change desc element to a metadata element

The content was just metadata about the creation. I also added some information to it.

Convert aria-label to aria-labelledby and a title element.

This re-enables tooltips for mouse users - the online version has a sophisticated tooltip mechanism but it doesn't work in the exported SVG.

Add an actual description in a top-level desc element.

Mostly describe the information presented, with a few words about the form of the graph.

General cleaning

The following is just a list of the things I did to simplify the code and make it easier to play with. Some things, like removing transforms, are sometimes a bad idea since they complicate some kinds of re-use, and I didn't necessarily do them in all possible cases.

• Remove redundant content, including default or invalid code:
  • clip-path and references
  • rect elements with fill="none"
  • line-join attributes
  • class attribute values used by script in the online version but not in the exported version.
• Remove default / invalid values:
  • opacity="1"
  • scale(1 1) transforms
  • color: CSS rules
  • x/y/rx/ry="0"
  • stroke-width="1"
• Remove many transform="translate(…)" by calculating the impact on relevant x and y values and apply them directly
• Trim x and y values to integers or nn.5
• Convert the line markers to use elements
• Convert repeated fill / stroke rules to style and class

The experiments…

Experiment 1: role="table" Work in Progress [THE 90s animated gif goes here. With no alt]

This data is absolutely tabular. So the obvious thing to do is use ARIA table markup for it, right?

Basically I added a <g role="table">, moved the x-axis labels into that group and made them role="columnheader", gave each line role="row", gave the title for the line  role="rowheader" which worked in Blink browsers that otherwise failed to recognise the ARIA but failed in Safari, and made the data points role="cell". Then Léonie's pull request trimmed the redundant information, and used a <g> element containing the <title> as the rowheader to make it appear.

You can try it out … and feel free to suggest stuff to do or offer changes as a Pull Request.

On Safari/VoiceOver, it works quite nicely, on Blink it only gives access to the rows, each one being presented as a listgroup. (Still, with Léonie's changes? TEST@@)

I learned…

• Trying to use a title with role="rowheading" or row="columnheading" didn't work in Safari.

Thank you

Chaals put this stuff together, but as explained and expected, it's building on a lot of other people's work.

Obviously, thanks to the people at highsoft.com for making their product, and perhaps slightly less obviously to the folk at WebAIM who did the surveys that generated the data used. A big thank you also to Léonie Watson for testing and thinking and improving experiment 1 in particular.