Question

我一直在使用样板.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的内部即我无法改变填充颜色。

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

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

或添加像alt标签或其他类似的文字描述？

修改

我说这是针对搜索引擎优化的，但事后看来，我在可访问性方面进行了思考。

当包含svg图像时，我如何以与上面的<img src="#" alt="image description">或.ir方法类似的方式描述屏幕阅读器的内容？

Answer 1

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

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

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

这是一个例子

＆lt; svg xmlns =“http://www.w3.org/2000/svg”version =“1.1”xmlns：xlink =“http://www.w3.org/1999/xlink”preserveAspectRatio =“ none“x =”0px“y =”0px“width =”100px“height =”50px“viewBox =”0 0 100 50“aria-labelledby =”a11yTitle“tabindex =”0“＆gt; ＆lt; desc id =“a11yTitle”＆gt;这是一个带有一些示例SVG文本的图像＆lt; / desc＆gt; ＆lt; text aria-hidden =“true”writing-mode =“lr”＆gt;＆lt; tspan x =“11.35”y =“10.85”baseline-shift =“0％”kerning =“0”font-family =“ Arial_Bold_Bold“font-weight =”bold“font-size =”12“fill =”＃990099“xml：space =”preserve“＆gt; Cool SVG text＆lt; / tspan＆gt;＆lt; / text＆gt; ＆LT; / SVG＆GT;

直接包含SVG时的可访问性

1 个答案: