Accessibility for charts

Question

We have several charts of different types across our application (donut, bar, line) that have their data fed in through APIs based on user selection (and therefore I have no control over the amount of elements within the charts - a bar chart could have 2 bars or 200)

With regards to screen readers and accessibility, I have seen several articles that talk about having a londesc which references an HTML representation of the data (as well as an aria-describedby/alt atrribute for the screenreader to announce)

If you have a chart with hundreds of elements, is it good practice to provide an HTML table with all the data? Is this useful to a visually impaired user? Would they listen to the screen reader announce every single row? Charts by their very nature are a quick visual representation of data/trends

Answer 1

It is a good practice to make the chart itself accessible by allowing keyboard focus on each bar and having the relevant data available via some visually hidden (screen reader only) text.

However with complex charts I am aware this is not always possible.

So yes, a table is a good idea as an alternative, but with a drill down functionality that matches the chart.

So let's say we have 10 rows of data, with 5 points of data used for each bar on a bar chart (so 2 bars each showing the total for 5 different data points).

We would have a table with two rows (representing the totals) and a button as part of each row that allows you to drill down to the 5 items that make up that total (these could be in a modal for example).

That way a screen reader user (and a keyboard only user if the chart is not keyboard accessible!) can get the "at a glance" information, but also drill down into detail if they require (the same as if they were using the chart).

Obviously without seeing the exact charts, graphs etc. I do not know if the detailed information is even relevant, and if it isn't then just add the totals to a table.