直接包含 SVG 时的可访问性答案

【问题标题】：Accessibility when including SVGs directly直接包含 SVG 时的可访问性
【发布时间】：2014-04-17 09:23:27
【问题描述】：

一段时间以来，我一直在使用样板文件 .ir 将文本替换为徽标和图标的图像。

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  *text-indent: 100%;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

但是现在我想开始为我的所有图标和徽标使用 svgs，当使用 svgs 作为背景或 <img> 时，你无法控制 svg 的内部结构 ie 我不会'无法更改填充颜色。

所以我想知道的是，在保持标题和链接的良好 SEO 的同时包含 svg 的最佳方式是什么？

或者有没有办法用 svg 替换文本？

或者添加文字描述，如 alt 标签或类似的东西？

编辑

我说这是为了 SEO，但事后看来，我正在考虑可访问性。

当包含 svg 图像时，我将如何向屏幕阅读器描述它是什么，类似于上面的 <img src="#" alt="image description"> 或 .ir 方法？

【问题讨论】：

这个问题似乎是题外话，因为它是关于 SEO
它是关于语义标记，这与 SEO 是有关的，但也与标记有关。但是，如果您认为我可能会在其他地方得到更好的回应，请告诉我。
为什么 SVG 图像与您已经做的（用图像替换文本）有什么不同？
它可以以完全相同的方式完成，但是您将失去更改 svgs 元素的能力，而且如果您直接包含 svgs () 他们不要接受请求。 css-tricks.com/using-svg
这里有一些很好的研究：blog.paciellogroup.com/2013/12/…

标签： css html svg seo accessibility

【解决方案1】：

您可以添加一个标签作为 SVG 中的第一个元素。给它一个唯一的 id 属性，然后将 aria-labelledby 属性添加到 SVG 元素本身，该属性的值是 desc 元素的 ID。

这适用于我所知道的所有浏览器和屏幕阅读器。

如果您的 SVG 中有其他元素（例如文本元素），您需要将它们全部设置为 aria-hidden="true" 以便那些确实阅读该文本的屏幕阅读器不会从SVG 本身。

这是一个例子

【讨论】：

感谢您的回复。会试试这个。