SVG内嵌或作为图像之间的可访问性有什么区别？

我正在开发一个试图专注于可访问性的网页，并在SVG中创建了不同的图形以进入它。在线阅读不同的网站（1,2和3）之后，我包含了<title>和<desc>标签，并添加了属性role和aria-labelledby以使SVG更易于访问。SVG内嵌或作为图像之间的可访问性有什么区别？

其中一些来源似乎声称（直接或间接）使用SVG inline更易于访问;所以我使用NVDA进行了一些测试以查看差异，但我没有看到任何乍一看。

例如，使用一个简单的SVG：。

<svg width="100" height="100" viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> 
 
    <title id="title">Abstract Forms</title> 
 
    <desc id="desc">Red square containing a white circle containing a blue triangle pointing up.</desc> 
 
    <g stroke="none" stroke-width="0"> 
 
    <rect x="0" y="0" width="100" height="100" fill="red" /> 
 
    <circle cx="50" cy="50" r="40" fill="white" /> 
 
    <path d="M 50,20 80,70 20,70 Z" fill="blue" /> 
 
    </g> 
 
</svg>

如果我把它添加到这样的页面，NVDA读取“图形抽象形态的含有白色圆圈红场包含一个蓝色的三角形指向“

如果我将它保存到一个myImg.svg文件，并将其添加到这样的页面：

<img src="myImg.svg" alt="Red square containing a white circle containing a blue triangle pointing up" title="Abstract Forms" />

NVDA然后读取“图形。包含一个白色圆圈的红色正方形包含一个蓝色三角形指向。“（与之前相同，只是没有阅读标题）

这可能是一个NVDA的事情，其他屏幕阅读器可能会做不同，但两者之间似乎没有任何显着差异。至少不要声明内联SVG对于可访问性更好

然后我认为它可能与阅读附加信息有关;例如，如果图形中有一些文本，所以我在末尾添加了一个的SVG ......但是NVDA读取与以前相同的内容;甚至没有选择它将读取的文本（我不知道这是否是NVDA的事情，并且如果其他屏幕阅读器以不同的方式进行）

所以我的问题是：SVG内联或作为图像有什么区别？让SVG内联的好处（可访问性）有哪些？

来源

2016-12-21 Alvaro Montoro

我有一个例子：http://www.svgdiscovery.com/_A/inline-svg-object-image.htm –

只是使用SVG的荣誉。由于您可以放大浏览器，并且SVG可以适当缩放并保持清晰明了，因此它对于低视力可访问性问题比图像效果更好。图像变得像素化。 – slugolicious

您可能已经自行回答了您的问题。

Inline-svg被解释为html网页的一部分。因此，您的svg标题和说明也会被解释并由屏幕阅读器读取。

当使用'img'标签来包含svg时，文件就像一个外部文件（如jpg）一样处理，因此只有img标签的'alt'属性被解释/由屏幕阅读器读取。

我目前没有源代码，现在无法测试它，但我认为svg代码中的链接也存在差异：内联svg中的链接由屏幕阅读器读取，而不是外部svg文件中的链接。

来源

2016-12-26 21:43:10

SVG内嵌或作为图像之间的可访问性有什么区别？

回答

相关问题