css - 将文本颜色设置为透明以隐藏可访问性内容？

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