屏幕阅读器是否访问过 SVG 的内容?

Do screenreaders ever access the content of an SVG?

我正在处理的代码需要通过 Tenon.io 的测试,它标记了 SVG 中发生的问题,特别是测试 ID 75(此 'id' 被多次使用).这是失败的,因为 SVG 对相似元素具有相同的 ID,因为它们是由同一个程序(我相信是 Illustrator)生成的,并且页面上出现了多个。我认为 SVG 中的任何内容都是无关紧要的,不应被屏幕阅读器或 Tenon.io 的爬虫标记甚至遍历。

我已经测试了在 VoiceOver 中出现此问题的页面,但它被忽略了。其他屏幕阅读器也这样做吗?是否存在任何屏幕阅读器遍历 SVG 的风险DOM?

是的,屏幕 reader 可以读取 SVG,只要该屏幕 reader 被编码为可以读取 SVG。

SVG 有许多可访问性标签,屏幕 reader 可以使用和阅读这些标签来描述 SVG 代表或打算显示的内容。

主要的辅助功​​能标签是

  • <title> 用于给 SVG 加标题
  • <desc> 用于描述 SVG 显示的内容
  • <text> 这是屏幕 reader 可以访问的 SVG 上已有的文本,而不是使用矢量来模拟字符

您还可以使用 reader 屏幕的常规属性来帮助识别 object,例如 role 以指定 SVG 的用途(例如 img).

另一种方法是创建一个可供所有屏幕 reader 访问的后备,因为有些人在阅读某些内容方面比其他人做得更好。

这里有一些您可以阅读的好文档,它们可能会有所帮助: