如何指示屏幕阅读器跳过 SVG 图表(轴标签)并改为阅读关联的 table?
How do I instruct screen readers to skip a SVG chart (axis labels) and read the associated table instead?
我有一个 SVG 图表和一个 table,两者都显示相同的数据。在使用 JAWS 进行测试时,我注意到在阅读 table 的内容之前,我阅读了 X 轴和 Y 轴上的所有文本标签。我尝试在图表中添加 aria-describedby="id-of-table"
,但这只会让情况变得更糟:现在 JAWS 仍然读取所有标签,但它还在 每个标签 [=22] 之后显示 "Use JAWS key+Alt+R to read descriptive text" =].
告诉 Jaws 和其他屏幕阅读器完全跳过此部分的正确方法是什么,因为它不适用,类似于装饰图像上的 alt=""
?
更新:这是一个 http://jsbin.com/wujuqaliqa/2/edit?output 示例,其中 aria-hidden
属性应用于图表。
在您不想读取的包含元素上设置 aria-hidden="true",如果没有公共容器,则在您不想读取的每个元素上设置。小心不要将它放在按钮或 link 等 Tab 可聚焦元素上,因为它们仍将是 Tab 可聚焦的,并且会根据 browser/AT 组合表现不同。
如果您将示例代码或 link 添加到 fiddle,我将能够准确地向您展示如何完成它。
我有一个 SVG 图表和一个 table,两者都显示相同的数据。在使用 JAWS 进行测试时,我注意到在阅读 table 的内容之前,我阅读了 X 轴和 Y 轴上的所有文本标签。我尝试在图表中添加 aria-describedby="id-of-table"
,但这只会让情况变得更糟:现在 JAWS 仍然读取所有标签,但它还在 每个标签 [=22] 之后显示 "Use JAWS key+Alt+R to read descriptive text" =].
告诉 Jaws 和其他屏幕阅读器完全跳过此部分的正确方法是什么,因为它不适用,类似于装饰图像上的 alt=""
?
更新:这是一个 http://jsbin.com/wujuqaliqa/2/edit?output 示例,其中 aria-hidden
属性应用于图表。
在您不想读取的包含元素上设置 aria-hidden="true",如果没有公共容器,则在您不想读取的每个元素上设置。小心不要将它放在按钮或 link 等 Tab 可聚焦元素上,因为它们仍将是 Tab 可聚焦的,并且会根据 browser/AT 组合表现不同。
如果您将示例代码或 link 添加到 fiddle,我将能够准确地向您展示如何完成它。