WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Mouse-only interactive line chart + same data in table format = sufficient?

for

Number of posts in this thread: 6 (In chronological order)

From: escetic@gmail.com
Date: Mon, Nov 20 2017 2:19PM
Subject: Mouse-only interactive line chart + same data in table format = sufficient?
No previous message | Next message →

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

From: Srinivasu Chakravarthula
Date: Mon, Nov 20 2017 10:16PM
Subject: Re: Mouse-only interactive line chart + same data in table format = sufficient?
← Previous message | Next message →

I would say making it keyboard operable will be great. This way we don't
need to worry about if the alternate table is updated or not. By making it
operable using keyboard would also serve users with vision impairment.

Answer for your bonus question would be that tabbing should be enough.

Regards,

Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Lead Accessibility Consultant, Informatica


On Tue, Nov 21, 2017 at 2:49 AM, < = EMAIL ADDRESS 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
> > > > >

From:
Date: Tue, Nov 28 2017 9:33AM
Subject: Re: Mouse-only interactive line chart + same data in table format = sufficient?
← Previous message | Next message →

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 ADDRESS REMOVED = > < = EMAIL ADDRESS 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

From: Steve Green
Date: Tue, Nov 28 2017 9:41AM
Subject: Re: Mouse-only interactive line chart + same data in tableformat = sufficient?
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Øystein Moseng
Sent: 28 November 2017 16:34
To: = EMAIL ADDRESS REMOVED =
Cc: = EMAIL ADDRESS 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 ADDRESS REMOVED = > < = EMAIL ADDRESS 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

From: escetic@gmail.com
Date: Wed, Nov 29 2017 11:42AM
Subject: Re: Mouse-only interactive line chart + same data in table format = sufficient?
← Previous message | Next message →

Hi Øystein,

I agree with Steve, this is good news and we're passing this info on to our vendor.

This is a very big deal for the fintech sector in Canada, especially the banks, who as you can imagine have some very complex needs around charts.

Rob C


> On Nov 28, 2017, at 11:41 AM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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 ADDRESS REMOVED = ] On Behalf Of Øystein Moseng
> Sent: 28 November 2017 16:34
> To: = EMAIL ADDRESS REMOVED =
> Cc: = EMAIL ADDRESS 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 ADDRESS REMOVED = > < = EMAIL ADDRESS 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
>
> > > > > > >

From:
Date: Thu, Nov 30 2017 1:57AM
Subject: Re: Mouse-only interactive line chart + same data in table format = sufficient?
← Previous message | No next message

Hi Rob and Steve,

Glad to hear that this is of interest.

Steve: Adding the module to existing charts is a very simple task. It is supported from Highcharts 5 onwards. You should ideally use the version of the module that corresponds to your Highcharts version to avoid conflicts (e.g. http://code.highcharts.com/5.0.2/modules/accessibility.js <http://code.highcharts.com/5.0.2/modules/accessibility.js>; for v5.0.2). We recommend a minimum of adding a longdesc to each chart by setting the "chart.description" option, but there is no mandatory configuration to make the module work. For more complex charts, some configuration might of course be necessary for optimal behavior.

Rob: It would be great to get some more feedback from the fintech sector on their needs around accessible charts. Charts with many data points present a particular challenge we need to solve in an elegant way. We are so far experimenting with adding modalities like sonification and export to tactile graphics, but I am sure there are other angles to explore as well.

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

> On 29 Nov 2017, at 19:42, = EMAIL ADDRESS REMOVED = wrote:
>
>
> Hi Øystein,
>
> I agree with Steve, this is good news and we're passing this info on to our vendor.
>
> This is a very big deal for the fintech sector in Canada, especially the banks, who as you can imagine have some very complex needs around charts.
>
> Rob C
>
>
>> On Nov 28, 2017, at 11:41 AM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> 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 ADDRESS REMOVED = ] On Behalf Of Øystein Moseng
>> Sent: 28 November 2017 16:34
>> To: = EMAIL ADDRESS REMOVED =
>> Cc: = EMAIL ADDRESS 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 ADDRESS REMOVED = > < = EMAIL ADDRESS 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
>>
>> >> >> >> >> >> >> > > > >