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

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

---

我已经测试了这个问题出现在画外音中的页面，它被忽略了。其他的屏幕阅读器也这样做吗？是否存在任何屏幕阅读器遍历SVG DOM的风险？

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

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

主要的辅助功能标签是

• 用于为SVG命名

• 用于描述SVG显示的内容

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

您还可以使用一些常规属性，屏幕阅读器使用这些属性来帮助识别对象，例如

role

，以指定SVG的用途（例如

img

）

另一种方法是创建一个后备方案，所有屏幕阅读器都可以访问该方案，因为有些阅读器在阅读某些内容方面比其他阅读器做得更好

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

---

您知道JAWS和NVDA是否会自动读取SVG吗？或者这更取决于SVG是否具有适合屏幕阅读器的元素？例如，我可以看到SVG的可读性对于图表很有用，但对于装饰性图标（这就是我在本例中看到的）则不太有用。我在讨论中的SVG上使用了aria hidden，因为它们还伴随着一个带有描述的视觉隐藏跨度，所以我假设SVG是可忽略的。@KatharineOsborne如果你看看这一部分的正上方，你会看到在许多屏幕上尝试和测试的CSS技巧readers@KatharineOsborne是的，我想说的是，对于可用信息来说，可访问性比“这是一个图标”或类似的东西更有用。通过添加说明来说明原因和理解，这对矢量图像非常有用，就像在普通图像中添加

alt

。@KatharineOsborne很遗憾，我无法提供更多帮助，我从未专门使用过任何屏幕阅读器，只根据文档和“支持”内容进行编码但没有收到任何问题报告。我认为您必须自己进行一些测试，以确定它是否按照您的用例预期工作。