Question

这三个屏幕阅读器用户有什么区别？

Answer 1

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

显示：无：将不会被看到或听到。 *
可见性：隐藏：将不会被看到或听到。 *
text-indent：9999：将不会被看到，但会被听到。

大多数屏幕阅读器都不会“说”显示：无和可见性：隐藏，但很少有像pwWebSpeak和HtReader这样的屏幕阅读器甚至会阅读这些内容。

Answer 2

在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

Answer 3

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

简而言之，visibility: hidden和display:none会隐藏屏幕阅读器中的文字，就像其他人一样。所有其他方法对于屏幕阅读器都是“可见的”。

Answer 4

many techniques可以直观地隐藏内容，但可供屏幕阅读器使用。

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;
}

Answer 5

完成答案是为了确保Chrome不会自动显示/自动填充输入框。在我的网页（新用户）上，电话字段和密码fioeld正在使用缓存数据进行自动填充。为了摆脱这种情况，我创建了两个虚拟字段，并为它们提供了一个类，使其对用户不可见。一个jquery函数，用于显示然后在分数后隐藏它们。

Jquery函数显示＆amp;隐藏：

$().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"/>

display：none vs visibility：hidden vs text-indent：9999屏幕阅读器的表现如何？

5 个答案: