将文本颜色设置为透明以隐藏可访问性内容？ [英] setting text color to transparent for hiding accessibility content?

问题描述

我有一堆标记的背景图像属性，我想给screenreaders一些内容，但我显然不能给它一个alt属性，因为他们不是< img> 标签。

I have a bunch of tags with background-images properties that I would like to give some content for screenreaders but I obviously can't give it an alt attribute since they are not <img> tags.

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

Would screenreaders be able to read the content as long as I set the text color to transparent?

我不想使用display：none或visibility：hidden，因为我已经读过，screenreaders不会读取这些内容，也可能被google惩罚隐藏内容。

I would not like to use display:none or visibility:hidden as I've read that screenreaders will not read those content and can also be penalized by google for hiding content. What are my options to accomplish this?

推荐答案

您可以使用透明的前景色 - 这可能会产生一个大的当屏幕阅读器（如VoiceOver）打开时，文本周围的边界 - 对于使用带有屏幕放大镜的屏幕阅读器的用户来说，这可能是一个问题。顶部左边的定位技术可以工作，但是在一些平台上遇到焦点丢失问题。

You could use transparent foreground color - this might have the side effect of drawing a big boundary around the text when a screen reader like VoiceOver is turned on - this can be a problem for a user using a screen reader with a screen magnifier. The top-left positioning technique works but suffers from focus loss problems on some platforms.

为简单文本做最好的方法是使用下面的CSS类： / p>

The best way to do it for simple text is to use the following 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;
}

这篇关于将文本颜色设置为透明以隐藏可访问性内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！