Question

我正在开发一个试图专注于可访问性的网页，并在SVG中创建了不同的图形。在线阅读了不同的网站（1，2和3）后，我添加了<title>和<desc>代码，并添加了role属性}和aria-labelledby使SVG更易于访问。

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

例如，使用简单的SVG：

＆＃13;

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

＆＃13;

如果我将它添加到这样的页面，NVDA会读取＆＃34; Graphic。抽象形式。红色方块，包含一个白色圆圈，上面有一个蓝色三角形。＆＃34;

如果我将其保存到myImg.svg文件中，并将其添加到页面中，如下所示：

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

然后NVDA读取＆＃34; 图形。红色方块，包含一个白色圆圈，上面有一个蓝色三角形。＆＃34; （和以前一样，只是不读标题）。

这可能是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文件中的链接不是。< / p>

将SVG内联或作为图像之间的可访问性有何不同？

1 个答案: