Question

我需要实现一个包含占位符文本且没有可见标签的表单，但仍然可以让无视力用户访问它。在标签上设置text-indent -9999px会隐藏它们，但会为表单添加额外的空间。有没有理由不将字体大小设置为0px？它仍然可以被屏幕阅读器读取吗？

Answer 1

我的建议：

.magic-text {
    color:transparent;
    font-size:0;
}

这会正确隐藏您的文字; font-size本身应该足够了，但有些浏览器的行为不同，所以我们在那些浏览器中使它变得透明（不可见）。对于那些没有被字体大小说服的浏览器，选择可能会显示你的文字但是付出的代价非常低;也可以通过本地禁用选择来避免。如果它不是一个选项，您仍然可以使用z-index和相对（甚至绝对）定位来隐藏文本：

.magic-text {
    position:relative;
    z-index:-99;  /* or just -1, whatever */
}

这样就可以了。

Answer 2

要以可视方式隐藏文字，但让屏幕阅读器可以使用Snook.ca http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

所使用的剪辑矩形屏幕外技术

该技术是将一个类应用于文本（在标签内的跨度上），并应用以下CSS。

.screen-reader-text {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}

过去使用了以下CSS，但由于iOS设备上存在焦点问题以及RTL语言问题，因此不再推荐使用CSS。

.screen-reader-text {
  position: absolute !important;
  left: -9999em;
  top: -9999em;
}

这是一个使用剪辑路径技术和老版浏览器回退的示例

<!doctype html>
<html>
<head></head>
<body>
<style>
    .screen-reader-text {
        position: absolute !important;
        height: 1px; width: 1px; 
        overflow: hidden;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
    }
    .background-image {
        background-image: url('https://cdn3.iconfinder.com/data/icons/abstract-1/512/go_B-512.png');
        background-size:cover;
        width:50px;
        height:50px;
    }
</style>
    <button class="background-image"><span class="screen-reader-text ">Go</span></button>
</body>
</html>

Answer 3

根据我在相关post上阅读的内容，当您将字体大小设置为0px时，屏幕阅读器应该没有问题。在他的帖子中，Rob使用网站上的以下代码作为实例。

#go { background: url(images/go.jpg); height: 25px; width: 41px; font-size: 0px; border:0; }

字体大小可以设置为0px以隐藏标签，并且仍然可以被屏幕阅读器读取

3 个答案: