将文本颜色设置为透明以隐藏辅助功能内容？

Question

我有一堆带有背景图片属性的标签，我想为屏幕阅读器提供一些内容，但我显然不能给它一个alt属性，因为它们不是<img>标签。

只要我将文本颜色设置为透明，屏幕阅读器是否能够阅读内容？

我不想使用display：none或visibility：hidden，因为我已经读过屏幕阅读器不会阅读这些内容，并且谷歌也会因隐藏内容而受到惩罚。我有什么选择来实现这个目标？

Answer 1

您可以使用透明的前景色 - 当打开像VoiceOver这样的屏幕阅读器时，这可能会产生在文本周围绘制大边界的副作用 - 对于使用带屏幕放大镜的屏幕阅读器的用户来说这可能是一个问题。左上角定位技术可行，但在某些平台上会出现焦点丢失问题。

对简单文本执行此操作的最佳方法是使用以下CSS类：

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}