45

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

4

5 回答 5

37

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

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

  • 大多数屏幕阅读器不会“说” display:none和visibility: hidden，但很少有像pwWebSpeak和 HtReader 这样的屏幕阅读器也会阅读这些内容。
于 2009-11-18T12:59:29.353 回答
17

在 A List Apart 中有很好的解释。http://www.alistapart.com/articles/fir/ 这取决于产品。

产品展示：无可见性：隐藏
Hal 版本 5.20 不读取 Reads
IBM Home Page Reader 3.02 不读 不读
Jaws（4.02、4.50、5.0 beta）
OutSpoken 9 不读 不读
Window-Eyes 4.2 不读 不读

请注意，这篇文章来自 2003 年，而 ALA 上该页面的最后一次更改是 2004 年。情况已经发生了变化。WebAIM 页面最后一次更新是在 2019 年：https ://webaim.org/techniques/css/invisiblecontent/

于 2011-05-24T04:20:38.717 回答
10

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

简而言之，visibility: hidden它将display:none像其他人一样对屏幕阅读器隐藏文本。所有其他方法将对屏幕阅读器“可见”。

于 2009-11-18T12:44:37.840 回答
4

有许多技术可以在视觉上隐藏内容，但可以将其用于屏幕阅读器。

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;
}
于 2013-11-21T19:48:19.233 回答
-1

Complete 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"/>
于 2016-10-18T08:01:46.347 回答