Support screen reader users
As a non-sighted user interacting with a chart using a screen reader, I would like different elements read. This would include (a summary text description of the chart, the type of chart, the structure and structural hierarchy of the plots, and the data behind the tooltips).
Ted Gies
shared this idea
-
Thanks for your feedback.
1. Does your comments apply to both approaches? (table => chart and chart => table)?
2. By structuring the data differently, do you mean simply swapping rows and columns? In that case the reader would read the table row by row, and each row will hold the data for one series.
-
Ted Gies
commented
Hi Torstein, the tables in your examples are ok but need a couple of tweaks. The aria-label on a div container isn't read by assistive technology unless there is some type of role assigned such as role="region". A better approach is to put a summary attribute on the table element. Furthermore, each column heading should have <th scope="col"> and each row heading should have <th scope="row">. I think that when you have multiple line series, the table needs to be structured differently. So we need a column denoting series name id or label. And replace the 2nd column heading which is just the series name with the actual Y axis label.
-
Hi Ted, have you seen http://www.highcharts.com/docs/chart-concepts/accessibility? How do these different options work with your screen reader?
