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?
-
你能链接到一个例子吗?
-
@unor:不幸的是,它现在只能通过 VPN 访问。但是@steveax 和@unbof 提到的 aria-hidden 属性结果正是我所需要的。
-
@NathanFriedly:我不太确定 aria-hidden 是否合适(因此我要求举个例子)。仅当图表不应该被任何人使用时,您才应该使用它,因为 aria-hidden 使得所有辅助技术都无法访问它,而不仅仅是屏幕阅读器。而且我假设图表对您的访问者有价值,否则您可能一开始就不会拥有它,所以它并不是真正多余的。
-
是的,影响我的部分是"作者可以谨慎使用 aria-hidden 来隐藏辅助技术中可见渲染的内容,前提是隐藏此内容的行为旨在改善辅助用户的体验通过删除冗余或无关内容的技术" - 我第一次错过了。这是一个略微精简的示例:jsbin.com/wujuqaliqa/1/edit?output
在您不想读取的包含元素上设置 aria-hidden="true",或者如果没有公共容器,则在您不想读取的每个元素上设置 aria-hidden="true"。请注意不要将其放在按钮或链接等可聚焦标签的元素上,因为这些元素仍可聚焦标签,并且会根据浏览器/AT 组合的不同而表现不同。
如果您添加示例代码或链接到小提琴,我将能够准确地向您展示如何完成它。
- 是的,这正是我所需要的。我已经简要地看了它,但我错过了部分描述。谢谢!
-
这不适用于带有 NVDO 软件的 Windows Edge