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)也可以阅读。
Rakesh Juyal answered 2020-08-11T21:21:41Z
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
Sanghyun Lee answered 2020-08-11T21:22:02Z
9 votes

关于屏幕阅读器如何解释WebAIM的这些属性,有很好的总结。

简而言之,visibility: hiddendisplay:none将隐藏屏幕阅读器中的文本,就像隐藏其他屏幕阅读器一样。 屏幕阅读器将“看到”所有其他方法。

anschauung answered 2020-08-11T21:22:27Z
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;
}
Oriol answered 2020-08-11T21:22:51Z
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"/>
Nitasha answered 2020-08-11T21:23:25Z
translate from https://stackoverflow.com:/questions/1755656/displaynone-vs-visibilityhidden-vs-text-indent9999-how-screen-reader-behave-w