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

Question

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

只要我将文本颜色设置为透明，屏幕阅读器就可以阅读内容吗？

我不想使用显示:无或可见性:隐藏，因为我读到屏幕阅读器不会阅读这些内容，并且还可能因隐藏内容而受到谷歌的惩罚。我有什么选择来实现这一目标？

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;
}