[Feature] Support for accessibility of elements inside the chart (series, legend...)

[aoliaoliao]

What problem does this feature solve?

I know echart has done a lot on accessibility, thanks a lot.

The purpose of this issue is want to know whether the Echart team has plans to support further improvement of the accessibility function, so that users can access specific elements inside the chart and operate them through tab, arrow keys and space keys.

What does the proposed API look like?

This is just an idea, take pie chart as an example.

const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });

const option = {
  aria: {
    show: true
  }, 
  series: [
    {
      name: 'Referrer',
      type: 'pie',
      data: [
        { value: 335, name: 'Direct Visit', ariaLabel: 'aria label for Direct visit' },
        { value: 310, name: 'Email Marketing' , ariaLabel: 'aria label for Email Marketing' },
        { value: 234, name: 'Union Ad' },
      ]
    }
  ]
};
myChart.setOption(option);

[plainheart]

Looks like a possible enhancement of the accessibility. Perhaps, we can take it a try in the future.

[aoliaoliao]

Hi, @plainheart Thank you for your answer. Can you tell me if there is a development plan for this feature and when we can use this feature?

[plainheart]

I'm afraid there is no certain time or plan for now. But we will take it into account in next versions.

[julianna-ciq]

@plainheart @aoliaoliao I've created an open source library, Chart2Music, that might help with this ticket. It can be used to provide keyboard navigation and interactive sonification, which provides access to the chart for keyboard-only users and blind screen reader users.

See also: Code examples of chart2music with other charting libraries

[limingyuan123]

@plainheart I would like to know when will this be available? I also encountered a similar need, thanks

[azhigalov]

Just wanted to note that this would be a welcome accessibility feature for us as well as we look to increase accessibility across our application including in chart interactions.