Search code examples
accessibilitywai-ariascreen-readersjaws-screen-reader

How do I instruct screen readers to skip a SVG chart (axis labels) and read the associated table instead?


I have a SVG chart and a table, both displaying the same data. When testing with JAWS, I noticed that I reads all of the text labels on the X and Y axis before reading the content of the table. I tried adding a aria-describedby="id-of-table" to the chart, but that just made it worse: now JAWS still reads all of the Labels, but it also says "Use JAWS key+Alt+R to read descriptive text" after every single label.

What is the correct way to tell Jaws and other screen readers to completely skip this section because it doesn't apply, similar to alt="" on a decorative image?

Update: here's an example http://jsbin.com/wujuqaliqa/2/edit?output with the aria-hidden attribute applied to the chart.


Solution

  • Set aria-hidden="true" on the containing element that you do not want read, or on each element you do not want read if there is no common container. Be careful not to put this on a tab-focusable element such as a button or a link because these will still be tab-focusable and will behave differently depending on the browser/AT combination.

    If you add example code or link to a fiddle, I will be able to show you exactly how to get it done.