css - 直接包含 SVG 时的辅助功能

Question

我一直在使用样板 .ir有时用图像替换 Logo 和图标的文本。

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

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

但现在我想开始将 svgs 用于我所有的图标和 Logo ，以及将 svgs 用作背景或 <img> 时你无法控制 svg 的内部结构 ie 我将无法更改填充颜色。

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

或者有什么方法可以用 svg 替换文本吗？

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

编辑

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

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

Answer 1

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

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

如果您的 SVG 中有其他元素(例如文本元素)，您需要将它们全部设置为 aria-hidden="true"以便那些阅读该文本的屏幕阅读器不会从中冗余地读取其他信息SVG 本身。

举个例子