WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Ways to make graphs accessible

for

From: Date: Jan 24, 2018 5:46AM

On 24/01/2018 09:55, Øystein Moseng wrote:
>
> Making data visualizations accessible is not an easy task, and I think it is important not to get locked in a single track. Much of the accessibility comes from the design of the chart. Are the colors of adequate contrast and understandable by people with varying forms of color blindness? Are the fonts readable? Are you using difficult language?

This is good advice. All of these things need to be considered,
regardless of the format of the data visualisation itself.

> The advantages of using SVG are several. Firstly, you can create dynamic and interactive charts for your sighted users. Interactive functionality such as drill down can even improve the cognitive accessibility aspects of the chart, and e.g. dynamic zooming functionality can make a chart much easier to understand. Secondly, you can make the SVG itself accessible to screen reader and keyboard-only users.
>


If you do decide to use SVG, you need to think about the underlying
structure of the data right from the beginning. The order of SVG
elements in the code doesn't necessarily have an effect on how the SVG
is displayed visually, but it is important when you come to add the
ARIA. It's the same as thinking about the separation between HTML and
the way CSS controls the way it's displayed visually.

Much will also depend on the data in the visualisation. If there is a
logical relationship between the data and an available structure, then
SVG can work. For example the line graph in the article becomes a table
under the hood. The flowchart in the latest version of the W3C Process
uses a nested list structure under the hood [1].

In terms of support, it's a matter of trial and error. Quite a lot just
works, but quite a lot doesn't for no obvious reason. Certain
browser/screen reader combinations work better than others.


Léonie
[1] https://w3c.github.io/w3process/