This document is on github as part of the work done in the W3C SVG accessibility Community Group - please feel free to contribute.
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
role="img" except that I use a
aria-labelledby instead of just an
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
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.
desc element to a
aria-labelledby and a
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
are sometimes a bad idea since they complicate some kinds of re-use, and I didn't necessarily do them in all possible cases.
clip-path and references
rect elements with
class attribute values used by script in the online version but not in the exported version.
scale(1 1) transforms
color: CSS rules
transform="translate(…)" by calculating the impact on relevant
values and apply them directly
y values to integers or nn.5
stroke rules to
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
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
Then Léonie's pull request trimmed the redundant information, and used a
<g> element containing the <title>
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@@)
row="columnheading" didn't work in
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.