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

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

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

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

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

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不读不读

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

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

有许多技术可以直观地隐藏内容,但可供屏幕阅读器使用。

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

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