屏幕阅读器会区别对待 SVG 和光栅图像吗？答案

【问题标题】：Do screen readers treat SVG and raster images different?屏幕阅读器会区别对待 SVG 和光栅图像吗？
【发布时间】：2018-01-24 18:46:54
【问题描述】：

与光栅图像（例如 PNG）不同，屏幕阅读器理论上可以读取并在一定程度上理解 SVG 文件的内容。屏幕阅读器在遇到 SVG 图像时通常会做什么，这种行为与遇到光栅图像时有何不同？

我正试图弄清楚一些具体的事情：

屏幕阅读器是否会尝试宣布 SVG 中的任何内容，例如 <svg:text> 标签中的内容（使用 SVG 中出现的内容的顺序作为阅读顺序）？
如果屏幕阅读器确实尝试在 SVG 中宣布内容，是否有技术可以帮助他们（例如，告诉他们“这条路径显示了一颗星”）？
屏幕阅读器是否会以不同的方式处理内联 SVG 内容和 <img src="file.svg"/>？

【问题讨论】：

标签： svg accessibility screen-readers

【解决方案1】：

辅助功能支持已发送至considered since the very first versions of SVG。

最新（开发中）版本 ov SVG（版本 2）有一个 expanded section on accessibility。

但是，我不知道流行的屏幕阅读器对 SVG 文件的支持程度究竟如何。你必须自己研究。

屏幕阅读器是否会尝试朗读 SVG 中的任何内容，例如标签中的内容（使用内容出现在 SVG 中的顺序作为阅读顺序）？

你试过了吗？

如果屏幕阅读器确实尝试在 SVG 中宣布内容，是否有技术可以帮助他们（例如，告诉他们“这条路径显示了一颗星”）？

是的。你会使用 ARIA 标签。请参阅上面的链接。

屏幕阅读器会以不同的方式处理内联 SVG 内容吗？

当然。以<img> 加载的SVG（也包括background-image 等）实际上是位图。页面和屏幕阅读器都无法访问内容。如果您希望 SVG 可访问，则它需要是内联的。尽管屏幕阅读器也可能支持通过 <object> 加载的 SVG。

【讨论】：

【解决方案2】：

您可以在 svg 根元素中插入 title 来标记该图像，例如：

<svg version="1.1" width="300" height="200">
<title>Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

【讨论】：