WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mouse-only interactive line chart + same data in tableformat = sufficient?

for

From: Steve Green
Date: Nov 28, 2017 9:41AM

Hi Øystein,

This is really good news. A few of our clients use Highcharts and it has been quite a challenge to make the data accessible. I will let them know that the Accessibility module is now available. Is it a simple addition for existing implementations of your charts?

Steve Green
Managing Director
Test Partners Ltd

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Øystein Moseng
Sent: 28 November 2017 16:34
To: <EMAIL REMOVED>
Cc: <EMAIL REMOVED>
Subject: Re: [WebAIM] Mouse-only interactive line chart + same data in table format = sufficient?

Hi Rob and all,

Øystein from Highcharts here, thought I would chime in with some specifics.

I would argue that there are many cases where a data table is vastly inferior to an interactive chart. Using Highcharts as an example, we allow for very rich tooltips with additional information and graphics relating to each individual data point. This can be clumsy to present in table format. We also support customized dynamic behavior when interacting with elements in the charts. Whenever you are converting an interactive visualization to a table you are making a conversion from a very rich medium to a very flat one, with a very limited layout. Depending on the complexity of the chart in question, this can result in an increased cognitive challenge to the reader, and/or a loss of information available to the reader if you choose to simplify things. Imagine a reader seeing a peak or drop in the chart and wanting to inspect the values around it. Navigating to and through a table to find these values takes a lot of effort even for a chart with a moderate number of data points. Whether or not a data table will technically be considered "enough" from a standards compliance perspective is of course a different question. Our testing indicates that you can create an acceptable user experience using a data table, as long as you are dealing with simple charts that do not utilise major interactive elements.

Now, since you happen to be using Highcharts (happy to hear that!), we have created an Accessibility module for our charts which goes a long way in making them accessible. This includes support for keyboard navigation, and a much improved experience for screen reader users. If you include this module, screen reader users can navigate the chart using their screen reader, and access each individual data point, as well as summary information and longdesc. A data table export is included as well, accessible to keyboard and screen reader users, giving readers the option if they prefer it. I would look at this for your specific use case and see if it is something that is of help: https://www.highcharts.com/docs/chart-concepts/accessibility <https://www.highcharts.com/docs/chart-concepts/accessibility>.

This module is the result of a longer research project we conducted in cooperation with Elsevier and several accessibility experts, and was presented at CSUN 2016. Since then we have taken it from the prototype stage into production, and it is now fully usable for live projects. We are still developing it actively to support more complex use cases and create the best experience possible, but we already have major enterprise customers relying on this for their accessibility support. See demos here: https://www.highcharts.com/a11y.html <https://www.highcharts.com/a11y.html>.

A bit of a sales pitch, but hopefully this is useful to your case specifically, even if not a definite answer to your actual question.

Best regards,
Øystein Moseng
Core Developer
Highsoft AS
@oysteinmoseng

> On 20 Nov 2017, at 22:19, < <EMAIL REMOVED> > < <EMAIL REMOVED> > wrote:
>
>
> Hi All,
>
> We're aiming for AA and we've produced a page which is a calculator, the user enters an amount and results are then displayed as a line chart, with two lines, showing different amounts projected over time. The point of the chart is to be able to compare the two lines.
>
> (In case it's helpful the chart is built and coded using the
> HighCharts library.)
>
> I've advised that data points for the chart should also be available in HTML table format, for blind users, via a link. This is not controversial.
>
> What is in question is that, since there is a kind of sliding animation effect and visual users can interact with the chart by mousing over different dot points along the lines, revealing via overlay the numbers beneath their pointer (e.g. "5 Years, $123,456"), and since these numbers are not otherwise visible, I've advised that we must also accommodate keyboard only users, that they should be able to move focus within the chart using keyboard only.
>
> Question: Is providing the data points in table format sufficient for visual but keyboard only users, or must the convenience of the mouseover exploration be available for keyboard only users as well?
>
> Bonus follow up question if answer is yes: Would slider keyboard interactions be needed here or would tabbing be sufficient?
>
> Thank you!
>
> Rob C