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

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

我的建议：

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

这将正确隐藏您的文本;字体大小本身应该足够了，但某些浏览器的行为不同，因此我们使其透明（不可见）。至于那些不相信字体大小的浏览器，选择可能会显示您的文本，但这是一个非常低的代价;也可以通过本地禁用选择来避免这种情况。如果不是选项，您仍然可以使用 z 索引和相对（甚至绝对）定位隐藏文本：

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

这将解决问题。

要直观地隐藏文本，但使其可供屏幕阅读器使用 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 语言的问题，不再建议这样做。

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

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

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

相关内容

最新更新

热门标签：