Chart.js: Accessibility support: keyboard navigation

[iratherscribble]

Feature request to support functional accessibility for users with disabilities through WCAG 2.0 (meeting at least Level A, although Level AA would be great).

A lot of sites may need to comply with regulations or accessibility mandates for their user population. Organizations may also want to proactively accommodate users with disabilities to allow content to be consumed by everyone. This can influence the decision for developers in selecting particular libraries or approaches in presenting data to users.

An example scenario would be with the Americans with Disabilities Act (ADA). It would be legally considered discrimination if, as an example, a sighted employee became blind and the employer did not accommodate the employee to allow them to do their job.

This request is not really asking for ensuring entire compliance, as things like contrast ratio of colors would be the responsibility of developer creating the chart, but more looking for support for screen readers, keyboard navigation, and similar functional and structural areas.

[thedamon]

Really important for any library like this.
I imagine implementing accessibility with something based on canvas would be a huge ordeal, but maybe as a less crazy alternative it could somehow describe the data in some kind of caption element

[etimberg]

There's a talk on general strategies for implementing a11y in the canvas https://www.w3.org/Talks/2014/0510-canvas-a11y/#1

I don't know what would be expected for a chart.

[christ0ph3r]

I just updated to chart js 2.0. Being able to toggle labels on line charts is a GREAT feature and I do not recall this being in 1.0. It would be very nice to be able to focus in on the chart js labels using keyboard navigation. Currently it seems like it skips the chart on the keyboard which can be a bit confusing for users who use the keyboard primarily to navigate around.

:smile:

[alshaero]

Certain elements are not accessible via the keyboard.

For example, buttons and tool tips are not accessible via keyboard,
Expected result: All interactive user interface elements are expected to be accessible via the keyboard.
This defect exists in IE 11 and Google Chrome v61.0.3163.100.
Reference: Section 508, Part 1194.21, Paragraph (a).

[alshaero]

Text equivalent is not provided for non-text element

• Testing was performed using JAWS v17.0.2619.
• This defect exists in IE 11 and Google Chrome v61.0.3163.100.
Expected result: Text equivalent is expected to be provided for non-text elements. In this instance the graph must be accompanied by actual text that states the purpose of the graph element and communicate the equivalent information represented within the graph.
Reference: Section 508, Part 1194.22, Paragraph (a).

[onehotprocessor]

Please work to make this accessible; there is only one other non-open source (that I know of -
Highcharts) for charting capacity that tries to be accessible. At minimum, including tab index on the charts for keyboard navigation, and accessibly labeled tooltips, will be a terrific start.

Here is Highchart's accessibility documentation on the subject:
https://www.highcharts.com/docs/chart-concepts/accessibility

Please allow the flow of information to be communicated to people with disabilities. Thank you.

[benmccann]

Documentation on how to make Chart.js charts accessible has been added here: https://www.chartjs.org/docs/latest/general/accessibility.html

[benmccann]

I think the documentation which was added has largely addressed this request. I'm not sure that there's a way to do more than provide developer guidance in our documentation, but am open to ideas. If there are specific technical implementations that folks want to propose we're happy to consider them

[stugoo]

Whilst the documentation addresses accessibility for screen readers, it doesn't add anything regarding keyboard navigation. Are there plans to introduce this in the future?

[benmccann]

There weren't any plans yet, but we're always open to new ideas. What elements would keyboard navigation allow you to move across? Is there a certain type of disability it would most help with? Is there a chart library that you think supports keyboard navigation well?

[stugoo]

Hey! Thanks for getting back to me @benmccann . Keyboard accessibility helps users with motor skills impairments such as those unable to hold a mouse or a stylus or those who suffer from hand tremors and couldn't accurately click or touch on something without difficulty. Generally they use a switch to select and highlight interactive elements to gain more information or activate the control.

For my particular use case, I'm thinking tooltips across data points. I wonder if you could append or generate links that coincide with the shapes in the canvas like in this example?

I believe Highcharts has keyboard navigation as part of their accessibility module, but I've not used it personally.

[fuzzzerd]

This would be a really fantastic add to the library. Keyboard navigation is crucial to accessibility efforts, and something that makes sense to be built into the library as opposed to the screen reader scenario, where tabular display of the data should be part of the consumers space.

[kurkle]

I tested keyboard navigation a little, is that at all helpful:
https://codepen.io/kurkle/full/WNrwjMp ?

[etimberg]

That looks great @kurkle. I think we'll need a way to programmatically trigger the tooltips (#2850). Not sure how to do that given that we want to move the tooltip off of the chart instance.