正确隐藏内容
并非所有隐藏内容的方法都适合屏幕阅读器用户或其他辅助技术用户。此页面概述了适用于所有用户和屏幕阅读器用户的主要内容隐藏方法。
使内容不可见（视觉上隐藏）
如果页面上的元素：
- 是一个交互元素，但需要将其隐藏以便主题化（例如，自定义样式的链接、复选框、单选按钮或表单控件）；
- 是某个元素的标题或标签，而其用途已显而易见（因此无需向有视觉的用户显示，例如区块标签或表单字段标签）；
- 不应对有视觉的用户可见，但应对屏幕阅读器用户可见；
……那么你应当将其设置为不可见（视觉上隐藏）。
你可以这样做：
为元素添加 visually-hidden 类，
在 Drupal 8 中，在实体子类型（例如文章内容类型中的“标签”字段）的“显示管理”页面中将字段标签设置为“- 视觉上隐藏 -”，
使用 CSS 将它定位到页面的可视区域之外，或者，
使用以下 CSS：
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal;
应用到该元素上。
示例：
隐藏错误、警告和状态消息的标题。
理由：
大多数主题会在显眼的彩色框中显示状态消息，以引起视觉用户的注意。但根据 WCAG 2.0 第 1.3.3 节，内容的理解和操作不应仅依赖于感官特征，如形状、大小、视觉位置或方向。
如果没有标题说明这些状态消息的性质，屏幕阅读器用户可能会感到困惑。
大多数屏幕阅读器允许用户通过页面标题快速导航。为消息添加标题有助于他们更容易找到相关内容。
使内容在通过键盘聚焦之前不可见
如果页面上的元素：
- 是帮助用户跳转到主要内容或主导航的链接；
- 是仅能通过鼠标使用的元素的替代方案；
- 仅当用户使用键盘浏览页面时才应可见；
……那么你应当在键盘聚焦前将其设置为不可见。
你可以这样做：
- 同时为元素添加 visually-hidden 和 focusable 类；或，
- 使用以下 CSS：
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
其中 css_selector_for_my_element 是你希望在键盘聚焦前隐藏的元素选择器。
示例：
核心主题页面顶部的“跳转到主要内容”链接。
理由：
使用键盘或屏幕阅读器的用户希望能快速跳转到页面主要内容。
为符合 WCAG 2.0 第 2.4.1 节 的标准，应提供一种方法跳过多个页面中重复的内容块。
完全隐藏所有用户的内容
如果页面上的元素：
- 在 JavaScript 事件触发前不应显示；
- 对视觉用户和屏幕阅读器用户都不相关；
- 包含 JavaScript 读取/写入的数据，但不应直接显示；
- 总体上不应对任何用户可见；
……那么你应当对所有用户完全隐藏它。
你可以这样做：
- 为元素添加 hidden 类（Drupal 8）；
- 如果是实体子类型中的字段，将其“显示格式”设置为“- 隐藏 -”；
- 如果是字段标签，将其“显示标签”设置为“- 隐藏 -”；或，
- 使用 CSS 属性：display: none;
示例：
在 JavaScript 启动前隐藏颜色模块的预览区域：
/* color.css (Drupal 7 和 8) */
#preview {
display: none;
}
理由：
如果 JavaScript 不工作，预览功能也不会工作，因此无需显示它。
错误用法
“display:none” 常被错误地用于隐藏表单标签或标题以改变页面外观。然而，这会使表单字段对屏幕阅读器用户不可用！
例如，如果用 “display:none” 隐藏表单标签，屏幕阅读器用户可能会听到：“我有一个必填文本输入框，但我不知道它的用途。” 在这种情况下，更合适的做法是将内容设置为视觉上隐藏。
使内容对屏幕阅读器不可见
如果页面上的元素：
- 单独存在会引起混淆；
- 或只应对视觉用户可见；
……那么你应当让它对屏幕阅读器不可见。
你可以这样做：
- 为元素添加属性 aria-hidden="true"
示例：
用于移除搜索筛选的控件仅向视觉用户显示 “x”，但为屏幕阅读器用户提供了视觉上隐藏的说明：
Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>
理由：
已经提供了可访问的替代文本。
单独听到 “x” 即使在听完说明后，仍可能让屏幕阅读器用户感到困惑。
错误用法
将内容对屏幕阅读器隐藏意味着使用它们的人无法感知或交互。为符合 WCAG 2.0 第 1.1 节，必须提供可访问的替代内容，否则辅助技术用户将无法使用它。