CSS display:none vs visible:hidden vs text-indent:9999 屏幕阅读器如何处理每个屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1755656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?
提问by Jitendra Vyas
What is the difference between these three for screen reader users?
对于屏幕阅读器用户来说，这三个有什么区别？
采纳答案by Rakesh Juyal
refer: http://css-discuss.incutio.com/?page=ScreenreaderVisibility
参考：http: //css-discuss.incutio.com/?page=ScreenreaderVisibility
display:none:will not be seen nor heard. *
visibility: hidden:will not be seen nor heard. *
text-indent: 9999:will not be seen but it will be heard.
display:none:不会被看到或听到。*
可见性：隐藏：不会被看到或听到。*
text-indent: 9999:不会被看到，但会被听到。
- Most of the screen reader will not 'speak' display:noneand visibility: hidden, but there are few screen readers like pwWebSpeakand HtReader which will read even these too.
- 大多数屏幕阅读器都不会“说话” display:none和visible : hidden，但很少有屏幕阅读器像pwWebSpeak和 HtReader 甚至会阅读这些。
回答by Sanghyun Lee
There's good explanation about this in A List Apart. http://www.alistapart.com/articles/fir/It depends on product.
在 A List Apart 中对此有很好的解释。http://www.alistapart.com/articles/fir/这取决于产品。
PRODUCT DISPLAY: NONE VISIBILITY: HIDDEN Hal version 5.20 Does not read Reads IBM Home Page Reader 3.02 Does not read Does not read Jaws (4.02, 4.50, 5.0 beta) Reads Reads OutSpoken 9 Does not read Does not read Window-Eyes 4.2 Does not read Does not read
Please note that this article is from 2003, and the last change to that page on ALA was 2004. Things have changed. The WebAIM page was last updated in 2019: https://webaim.org/techniques/css/invisiblecontent/
请注意，这篇文章是 2003 年的，ALA 上该页面的最后一次更改是 2004 年。事情已经发生了变化。WebAIM 页面上次更新于 2019 年：https: //webaim.org/techniques/css/invisiblecontent/
回答by anschauung
There's a very good summary of how screen readers interpret these properties at WebAIM.
在WebAIM上有一个很好的关于屏幕阅读器如何解释这些属性的总结。
In a nutshell, visibility: hiddenand display:nonewill hide text from screen readers just like it does from others. All other methods will be 'visible' to a screen reader.
简而言之，visibility: hidden以及display:none将隐藏屏幕阅读器就像它从别人做的文本。所有其他方法对屏幕阅读器都是“可见的”。
回答by Oriol
There are many techniquesto hide content visually but have it available for screen readers.
有许多技术可以在视觉上隐藏内容，但让屏幕阅读器可以使用它。
The H5BP technique works in FF, Webkit, Opera and IE6+
H5BP 技术适用于 FF、Webkit、Opera 和 IE6+
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
回答by Nitasha
Complete Answere is here to make sure chrome doesnt autoshow/autofill input boxes. On my web page ( New User) , telephone field and Password fioeld were being autofilled with cached data. To get rid of this, I created two dummy fields and gave them a class which makes them invisible to the user. A jquery function to show and then hide these after a fraction.
Complete Answere 是为了确保 chrome 不会自动显示/自动填充输入框。在我的网页（新用户）上，电话字段和密码字段会自动填充缓存数据。为了摆脱这种情况，我创建了两个虚拟字段并给了它们一个类，使它们对用户不可见。一个 jquery 函数，用于显示然后在分数后隐藏它们。
Jquery function to show & hide:
用于显示和隐藏的 Jquery 函数：
$().ready(function() {
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1000);
});
Class:
班级：
.fake-autofill-fields
{
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Input fields:
输入字段：
<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>
