我一直在使用样板 .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 方法?
最佳答案
您可以添加
这将适用于我所知道的所有浏览器和屏幕阅读器。
如果您的 SVG 中有其他元素(例如文本元素),您需要将它们全部设置为 aria-hidden="true"以便那些阅读该文本的屏幕阅读器不会从中冗余地读取其他信息SVG 本身。
举个例子
关于css - 直接包含 SVG 时的辅助功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23129267/