Support screen reader to read graph label and content

[lesscodingmorehappiness]

Feature Proposal

Ref: https://github.com/chartjs/Chart.js/issues/10450 Since last one was closed and new comments was not replied I'm opening a new issue.

Is aria-label the only way to make screen reader to read label and content? Because some of our graphs have lots of data points (more than 20). Is it possible to make the label accessible, and make both label and data points readable by screen reader? So that we can use keyboard to navigate through labels and data points and screen reader can read their value one by one?

In https://github.com/chartjs/Chart.js/issues/1976 @kurkle pasted an accessible example link https://codepen.io/kurkle/full/WNrwjMp, but in that example the 'bar' label is not accessible by keyboard, only 3 data bars are accessible. And screen reader won't read data value when we go through them one by one.

Just want to know if this is feasible. If it is, any example or doc talking about the implement?

Thanks

Possible Implementation

No response

[kurkle]

The "Bar" label is in the legend. You can create a html legend to make that accessible.

https://www.chartjs.org/docs/latest/samples/legend/html.html

[lesscodingmorehappiness]

Thanks.

And what about reading single data point value, is that feasible? @kurkle

[etimberg]

The tooltip could also be made into HTML and thus made accessible. Beyond that, it may be possible to give some fallback data for the canvas but I don't have enough knowledge of screenreaders to know what would be useful

[LeeLenaleee]

If you want to have everything accessible for screenreaders in the chart, I think a SVG based library is a better alternative since you can add aria labels to all the elements in the chart then