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

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

Answer 1

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

显示：无：不会被看到也听不到。 *
知名度：隐藏：不会被看到也听不到。 *
文字缩进：9999：不会被看到，但会被听到。

• 大多数的屏幕阅读器不会“说话” 显示：没有和可见性：隐藏 ，但像pwWebSpeak和HtReader这样的屏幕阅读器也很less。

Answer 2

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

产品展示：无可见性：隐藏
 Hal版本5.20不读取读取
 IBM主页读取器3.02不读取不读取
大白鲨（4.02，4.50，5.0 beta）读取读取
 OutSpoken 9不读不读不读
 Window-Eyes 4.2不读不读

Answer 3

在WebAIM中，屏幕阅读器是如何解释这些属性的。

简而言之， visibility: hidden和display:none将屏幕阅读器中的文本隐藏起来，就像它从别人那里隐藏的一样。 所有其他方法将对屏幕阅读器“可见”。

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

Answer 5

完成Answere在这里确保chrome不会自动/自动填充input框。 在我的网页（新用户），电话字段和密码fioeld正在自动填充caching的数据。 为了摆脱这一点，我创造了两个虚拟的领域，并给他们一个类，使他们隐身的用户。 一个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字段：

 <input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/> <input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>