隐藏可见显示中的非交互式内容仍然由屏幕阅读器读取

如果你通过在 CSS 中设置 display: none 来隐藏链接，那么屏幕阅读器将无法找到它。

相反，我们绝对定位，剪裁。

CSS

.offscreen { position: absolute; clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }

HTML

<div class="offscreen">This text is hidden.</div>

信用 ：

Steve Faulkner（Paciello Group）： HTML5 辅助功能印章：隐藏和咏叹调隐藏 ，2012 年 5 月 1 日。

Ted Drake 的笔记，关于使用屏幕外技术的描述：

使用负位置可以在为 rtl 语言本地化站点时创建长滚动条。此外，它使用常用的 CSS 属性，并且容易被意外覆盖。

雅虎无障碍实验室建议将剪辑用于应向视觉用户隐藏的内容，但屏幕阅读器用户可以使用。Thierry Koblentz 有一篇关于这项技术的精彩文章，以及使用正确的 CSS 技术隐藏内容背后的基本理念。剪辑隐藏的内容以获得更好的可访问性