display:none 与visibility:hidden 与text-indent:9999 屏幕阅读器对每一个的行为如何？

Question

对于屏幕阅读器用户来说，这三者之间有什么区别？

Answer 1

参考： http://css-discuss.incutio.com/?page=ScreenreaderVisibility

显示：无： 将不会被看到或听到。*
能见度：隐： 将不会被看到或听到。*
文本缩进：9999： 不会被看到，但会被听到。

• 大多数屏幕阅读器不会“说话” 显示：无 和 能见度：隐 ，但很少有像这样的屏幕阅读器 pwWebSpeak 和 HtReader 也可以读取这些内容。

Answer 2

有关于这个列表中除了很好的解释。 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

Answer 3

还有的屏幕阅读器如何解释这些特性在 WebAIM 一个很好的总结。

在简单地说，visibility: hidden和display:none将隐藏屏幕阅读器就像它从别人做的文本。所有其他方法将是“可见的”屏幕阅读器。

Answer 4

有许多技术以视觉上隐藏的内容，但它具有可屏幕阅读器。

在H5BP技术在FF，Webkit的，歌剧院和IE6 +

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Answer 5

完整的answere在这里，以确保铬犯规自动显示/自动填充输入框。 在我的网页（新用户），电话场和密码fioeld正在使用自动填充缓存数据。为了摆脱这一点，我创建了两个虚拟域，并给了他们一个班，这使得他们对用户不可见。一个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"/>