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

Question

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

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

我不想使用 display:none 或 visibility:hidden，因为我了解到屏幕阅读器不会阅读这些内容，并且还可能因隐藏内容而受到 google 的惩罚。我有哪些选择来实现这一目标？

Answer 1

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

对于简单文本，最好的方法是使用以下 CSS class:

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

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

setting text color to transparent for hiding accessibility content?

css

accessibility

screen

transparent

reader