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

Posted 2023-05-07

【中文标题】display:none vs visibility:hidden vs text-indent:9999 每个屏幕阅读器的行为如何？

【英文标题】：display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

【发布时间】：2010-12-17 20:37:33

【问题描述】：

屏幕阅读器用户这三个之间的区别是什么？

【问题讨论】：

我有一些屏幕读者的经验，虽然有限，但我认为他们忽略了css ......做现代屏幕读者还忽略了javascript生成的内容吗？ span> jaws（freedomscientific.com/products/fs/jaws-product-page.asp），最流行的屏幕阅读器（webaim.org/projects/screenreadersurvey2）不是专用的浏览器，而是一个制作其他程序的应用程序，例如浏览器，可访问的其他程序。我不确切知道它是如何工作的，但我认为它只是搭载浏览器的渲染引擎来决定要说什么。 为什么要读出隐藏的文本？它知道隐藏了什么吗？我正在尝试更好地理解此 CSS 属性的应用，以便您知道何时使用哪一个。

【参考方案1】：

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

display:none: 不会被看到也不会被听到。 *可见性：隐藏：不会被看到或听到。 *text-indent: 9999: 不会被看到，但会被听到。

大多数屏幕阅读器不会“说” display:none 和 visibility: hidden ，但很少有屏幕阅读器像 pwWebSpeak 和 HtReader 会阅读甚至这些也是。

【讨论】：

我用 NVDA 屏幕阅读器进行了测试，它会读取那些被 display:none 隐藏的元素

我指定的链接中有类似的评论。 RTIMO。

上述可能性不适用于 IE 中的 JAWS

【参考方案2】：

在 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/

【讨论】：

NVDA 呢？

【参考方案3】：

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

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

【讨论】：

但我下载了 NVDA 屏幕阅读器软件，它显示显示：无内容

是的，不幸的是，在 CSS 方面，屏幕阅读器与有视力的浏览器一样不一致。标准如上所述，但总会有一些忽略标准。

我发现 NVDA 屏幕阅读器如果在屏幕加载时处于该状态，则不会读出 display: none 内容；但如果使用 javascript 将状态更改为display: none，屏幕阅读器不会意识到，而是读出内容。

【参考方案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;

【讨论】：

该死的，这就解释了为什么我在某人的 css 代码上看到了这个确切的 sn-p，希望他们至少能发表评论

【参考方案5】：

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"/>

【讨论】：

输入字段：

autocomplete="off" ?!