Charts Accessibility

[akashsonune]

Charts Accessibility

Based on my understanding after looking at different chart libraries and their accessibility handling, I see that the chart user expect below things while interacting with charts

• Understanding what the chart is about - The user wants a quick orientation: what is this chart, what does it show, and what is the general trend? This is served by a descriptive aria-label.
• Be able to interact with the chart - toggling series on or off via the legend, or navigating through individual data points to hear their values announced one by one
• Be able to view and read through all the data : User wants to access complete dataset (through datatable)

I tried to cover case 1 and 2 in the PR- #1964 See demo
For the third case (as discussed with @panch1739 that it can be useful to have), we have some options that Echart offers.

• Enable aria configuration, see PR- feat(charts-ng): improve charts accessibility #1735 , See demo
  ECharts can automatically generate a full spoken description of the chart: series names, data point values, etc. The problem is that for any chart with a reasonable amount of data, this description becomes very long — potentially several minutes of reading. More critically, the user has no way to pause, skip, or stop it once it starts.
• ECharts has a built-in "data table" feature that overlays the chart with the raw data. See example - https://echarts.apache.org/examples/en/editor.html?c=line-marker
  Unfortunately, it renders the data inside a plain text field rather than a proper table, meaning screen readers cannot navigate it by row and column. It is not meaningfully accessible. It is also poorly positioned and conflicts with other chart elements.
• Another option is to let the user build their own data table using the chart's series and data, where the user has full control

Here are examples of other charting solutions

• Carbon - https://carbondesignsystem.com/data-visualization/simple-charts/#area-(simple)

  • Legends can be interacted with, but not the chart datapoints
  • Datatable view for complete dataset

• High charts - https://www.highcharts.com/demo/highcharts/line-chart

  • Legends can be interacted with
  • Datapoints can be traversed with arrow keys
  • Datatable view for complete dataset

• Current Implementation in Element - Demo

  • aria label for the charts description
  • Traverse legend items with arrow keys (Left/Right) (custom legend only)
  • Select/Unselect legend item with Enter/space
  • Tab to move to charts view with tooltip opened of first datapoint
  • Traverse through each data point with arrow keys (Left/Right)
  • Escape to close tooltip
  • Use Shift +/- to zoom in/out , Shift arrows to move slider left/right, home to reset zoom

If there are any inputs or better accessibility examples around the charts, feel free to suggest, along with the feedback for the current implementation

@panch1739 @dr-itz @kfenner @spike-rabbit