Question

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

我想弄清楚一些具体的事情：

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

Answer 1

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

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

但是我不知道流行的屏幕阅读器支持SVG文件的详细程度。你必须自己研究一下。

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

你试过吗？

如果屏幕阅读器确实尝试在SVG中宣布内容，是否有技术可以帮助他们（例如，一种告诉他们的方式＆＃34;此路径显示明星＆＃34;）？

是。你会使用ARIA标签。见上面的链接。

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

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

Answer 2

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

<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>

屏幕阅读器是否会对SVG和光栅图像进行不同的处理？

2 个答案: