我需要实现一个带有占位符文本且没有可见标签的表单，但仍然使非视线用户可以访问它。在标签上设置text-indent: -9999px会将其隐藏，但会在表单上添加额外的空间。有什么理由不只是将字体大小设置为0px？屏幕阅读器仍然可以读取吗？
我的推荐：
.magic-text {
color:transparent;
font-size:0;
}
这将正确隐藏您的文本；字体大小本身就足够了，但是某些浏览器的行为有所不同，因此我们在其中使它透明（不可见）。对于那些不被字体大小说服的浏览器，选择可能显示您的文本，但这是非常低的价格；也可以通过局部禁用选择来避免。如果这不是一种选择，您仍然可以使用z-index和相对（甚至绝对）定位来隐藏文本：
.magic-text {
position:relative;
z-index:-99; /* or just -1, whatever */
}
这将解决问题。
要在视觉上隐藏文本，但要让屏幕阅读器可以使用，请使用Snook.ca http://snook.ca/archives/html_and_css/hiding-content-for-accessibility流行的Clip rect offscreen技术。>
该技术是应用以下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>
根据我在相关的post上阅读的内容，将字体大小设置为0px时，屏幕阅读器应该没有问题。 Rob在他的帖子中，使用该站点上的以下代码作为现场示例。