我们需要在创建一个整洁、简单的视觉设计和提供可访问的内容和功能之间做平衡。一个通用的解决办法是向屏幕阅读器提供补充文本,并通过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 */