Css 显示：无vs可见性：隐藏vs文本缩进：9999屏幕阅读器如何处理每个屏幕阅读器？

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

关于屏幕阅读器如何解释这些属性，这里有一个非常好的总结

简而言之，

visibility:hidden

和

display:none

对屏幕阅读器隐藏文本，就像对其他阅读器一样。所有其他方法将对屏幕阅读器“可见”。

请参阅：

显示：无：将无法看到或听到*
可见性：隐藏：既看不见也听不见*
文本缩进：9999:将不会被看到，但会被听到

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

---

关于这一点，在一个单独的列表中有很好的解释。 这取决于产品

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 产品显示：无可见性：隐藏 Hal版本5.20不读取 IBM主页阅读器3.02不读取不读取 Jaws（4.02、4.50、5.0 beta版）读取 直言不讳9不读不读 窗眼4.2不读取不读取 请注意，这篇文章是从2003年开始的，上一次对ALA页面的更改是在2004年。事情变了。WebAIM页面上一次更新是在2019年：

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

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

---

完整的Answare用于确保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"/>

我对屏幕阅读器有一些经验，虽然有限，但我认为他们忽略了CSS。。。现代的屏幕阅读器也会忽略javascript生成的内容吗？最流行的屏幕阅读器JAWS（）不是一个专用浏览器，而是一个可以访问其他程序（如浏览器）的应用程序。我不知道它到底是如何工作的，但我认为它只是依靠浏览器的渲染引擎来决定该说什么。为什么要读取隐藏的文本？。它知道隐藏着什么吗？我试图更好地理解这个CSS属性的应用，这样你就知道什么时候使用它了。我用NVDA屏幕阅读器进行了测试，它可以读取那些被显示隐藏的元素：无我指定的链接中有类似的注释。RTIMO。上述可能性在IED中不适用于JAWS，但我下载了NVDA屏幕阅读器软件，它显示：无内容是的，不幸的是，屏幕阅读器在CSS方面与有远见的浏览器一样不一致。标准如上所述，但总会有一些忽略标准。我发现NVDA屏幕阅读器不会读取

显示：如果屏幕加载时处于该状态，则无
内容；但是如果使用javascript将状态更改为
display:none
，屏幕阅读器不会意识到，并读取内容。输入字段：该死，这解释了为什么我在某人的css代码中看到了这个片段，希望他们至少能发表评论