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

【问题标题】：Do screenreaders ever access the content of an SVG?屏幕阅读器是否访问过 SVG 的内容？
【发布时间】：2016-12-09 16:01:17
【问题描述】：

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

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

【问题讨论】：

标签： svg accessibility screen-readers

【解决方案1】：

是的，只要屏幕阅读器经过编码以读取 SVG，屏幕阅读器就可以读取 SVG。

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

主要的可访问性标签是

<title> 用于为 SVG 命名
<desc> 用于描述 SVG 显示的内容
<text> 是 SVG 上已有的文本，屏幕阅读器可以访问，而不是使用矢量来模拟字符

您还可以使用普通属性来帮助屏幕阅读器识别对象，例如 role 来指定 SVG 的用途（例如 img）。

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

这里有一些不错的文档，您可以阅读它们可能会有所帮助：

【讨论】：

你知道 JAWS 和 NVDA 是否会自动读取 SVG 吗？或者这是否更取决于 SVG 是否具有适合屏幕阅读器的元素？
我可以看到可读的 SVG 对例如图表很有用，但对装饰图标却没有（在这种情况下我就是这样）。我在有问题的 SVG 上使用 aria-hidden，因为它们还伴随着带有描述的视觉隐藏跨度，所以我认为 SVG 是可忽略的。
@KatharineOsborne 如果您在此部分上方查看css-tricks.com/accessible-svgs/#article-header-id-4，您会看到 CSS-Tricks 在许多屏幕阅读器上经过尝试和测试
@KatharineOsborne 遗憾的是，我无法提供更多帮助，我从未专门使用任何屏幕阅读器，仅根据文档和“支持”的内容进行编码，但没有收到任何问题报告。我认为您必须自己进行一些测试，以了解它是否按您的用例的预期工作。
发布一个 URL，我可以在 JAWS 和 NVDA 中浏览它。无论如何，Tenon 应该会失败，因为页面上不允许重复 ID，即使在 SVG 等引用元素中也是如此。您可能只想手动编辑 SVG 文件以防止这种情况发生（毕竟它们是纯文本）。