标签归档:position

为了更好的可访问性,使用clip隐藏内容

我们需要在创建一个整洁、简单的视觉设计和提供可访问的内容和功能之间做平衡。一个通用的解决办法是向屏幕阅读器提供补充文本,并通过CSS隐藏这些文本。请访问我们的屏幕阅读器测试:无障碍隐藏内容方案来了解更多关于隐藏内容的可访问性的信息。

从Jonathan的这篇博文 Adaptive Themes中的评论和其他地方的提问来看,许多开发者仍然对这个问题感到困惑。因此,首先扼要重述一下基本的声明,当提及隐藏内容时:

使内容对辅助技术(AT)可访问的技术

position:absolute;
clip:rect(1px 1px 1px 1px);
position:absolute; left:-999em;
position:absolute; top:-999em;
text-indent:-999em;

使内容无法访问的技术(所有用户均不可见)

visibility:hidden; /* in most screen readers*/
display:none;
/*in most screen readers and with some exceptions
http://juicystudio.com/article/screen-readers-display-none.php*/
overflow:hidden;
height:0; /* In VoiceOver */

继续阅读为了更好的可访问性,使用clip隐藏内容