svg - 屏幕阅读器是否曾经访问过 SVG 的内容？

Question

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

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

Answer 1

是的，只要屏幕阅读器已被编码为读取 SVG，屏幕阅读器就可以读取 SVG。

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

主要的可访问性标签是

<title>用于为 SVG 命名

<desc>用于描述 SVG 显示的内容

<text>这是屏幕阅读器可以访问的 SVG 上已有的文本，而不是使用向量来模拟字符

您还可以使用屏幕阅读器用来帮助识别对象的常规属性，例如 role指定 SVG 的用途(如 img )。

另一种方法是创建一个可供所有屏幕阅读器访问的后备，因为有些人在阅读某些东西时比其他人做得更好。

以下是一些您可以阅读的好文档，它们可能会有所帮助:

SitePoint's SVG Accessibility Guide

CSS-Tricks SVG Accessibility Guide

W3C Doc on SVG Accessibility API Mappings

W3C Accessibility Features of SVG