将SVG内联或作为映像在可访问性上有什么区别？

Question

我正在开发一个试图着重于可访问性的网页，并在SVG中创建了不同的图形。 在线阅读不同网站后（ 1 ， 2 ，和3 ），我包括<title>和<desc>标签，并添加属性role和aria-labelledby使SVGs更容易获得。

其中一些消息来源似乎（直接或间接地）声称内联使用SVG更好地实现了可访问性。 因此我对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的末尾添加了<text x="50" y="50" fill="black">Hello World</text> ...但是NVDA读取的内容与以前相同； 甚至不选择文本，它就会读取它（同样，我不知道这是否是NVDA内容，以及其他屏幕阅读器是否以其他方式进行了处理）。

所以我的问题是： 将SVG内联或作为映像有什么区别？ 内联SVG有什么好处（对于可访问性）？

Answer 1

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

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

当使用'img'标签包含svg时，该文件的处理方式类似于外部文件（例如jpg），因此屏幕仅会解释/读取img标签的'alt'属性（=图片描述）读者。

我目前没有任何资料，暂时无法测试，但是我认为svg代码中的链接也有差异：内嵌svg中的链接由屏幕阅读器读取，而外部svg文件中的链接则无法。