CSS-display:none vs visible:hidden vs text-indent:9999屏幕阅读器的行为如何?
对于屏幕阅读器用户来说,这三个有什么区别?
Jitendra Vyas asked 2020-08-11T21:21:18Z
5个解决方案
34 votes
参考:[http://css-discuss.incutio.com/?page=ScreenreaderVisibility]
显示:无:将不会被看到或听到。 *
能见度:隐藏:不会被看到或听到。 *
text-indent:9999:将不会显示,但会被听到。
- 大多数屏幕阅读器都不会“说”显示:无和可见性:隐藏,但是很少有屏幕阅读器(例如pwWebSpeak和HtReader)也可以阅读。
16 votes
在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
9 votes
关于屏幕阅读器如何解释WebAIM的这些属性,有很好的总结。
简而言之,visibility: hidden
和display:none
将隐藏屏幕阅读器中的文本,就像隐藏其他屏幕阅读器一样。 屏幕阅读器将“看到”所有其他方法。
2 votes
有很多技术可以可视地隐藏内容,但可供屏幕阅读器使用。
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;
}
0 votes
完整的Answere在此处可确保chrome不会自动显示/自动填充输入框。在我的网页(新用户)上,电话字段和密码字段被自动填充了缓存的数据。 为了消除这一点,我创建了两个虚拟字段,并为它们提供了一个类,使它们对用户不可见。 一个jQuery函数来显示然后隐藏这些分数。
jQuery函数显示和隐藏:
$().ready(function() {
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1000);
});
类:
.fake-autofill-fields
{
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
输入字段:
<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>