关于可访问性:如何指示屏幕阅读器跳过 SVG 图表(轴标签)并改为阅读相关表格?

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

我有一个 SVG 图表和一个表格,它们都显示相同的数据。在使用 JAWS 进行测试时,我注意到我在读取表格内容之前读取了 X 和 Y 轴上的所有文本标签。我尝试在图表中添加一个 aria-describedby="id-of-table",但这只会让情况变得更糟:现在 JAWS 仍会读取所有标签,但它还会在每个标签之后显示"使用 JAWS 键 Alt R 读取描述性文本"。

告诉 Jaws 和其他屏幕阅读器完全跳过此部分的正确方法是什么,因为它不适用,类似于装饰图像上的 alt=""

更新:这里是一个示例 http://jsbin.com/wujuqaliqa/2/edit?output,其中 aria-hidden 属性应用于图表。


在您不想读取的包含元素上设置 aria-hidden="true",或者如果没有公共容器,则在您不想读取的每个元素上设置 aria-hidden="true"。请注意不要将其放在按钮或链接等可聚焦标签的元素上,因为这些元素仍可聚焦标签,并且会根据浏览器/AT 组合的不同而表现不同。

如果您添加示例代码或链接到小提琴,我将能够准确地向您展示如何完成它。