并非所有隐藏内容的技术都适合屏幕阅读器或其他自适应技术的用户。此页面介绍了为所有用户和使用屏幕阅读器的用户隐藏内容的主要技术。
使内容不可见（在视觉上隐藏）
如果页面上的元素：
- 是一个交互式元素，但需要使其不可见，以便可以使其主题化（例如：链接，复选框，单选按钮或具有自定义样式的表单控件），
- 是某个目的是视觉上可见的东西的标题或标签（因此，标题/标签不需要向有视力的用户显示；例如：部分标签或表单元素标签），或者，
- 通常，对视力不佳的用户不应该看到，但对屏幕阅读器用户应该可见，
...那么您应该使其不可见（在视觉上隐藏）。
您可以通过以下方式做到这一点：
- 给元素一个类
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-hiddenfocusable - 使用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类别（D8）， - 如果它是实体子类型的字段，则在该实体子类型的“ 管理”显示页面上将其格式设置为“-隐藏-” ，
- 如果它是实体子类型中的字段标签，则在该实体子类型的“ 管理”显示页面上将其标签显示设置为“-隐藏-” ，或者，
- 在元素上使用CSS 。
display: none;
- 例：
- 隐藏颜色模块的预览区域，直到运行Javascript：
/* color.css (Drupal 7 and 8) */ #preview { display: none; } - 推理：
- 如果JavaScript未运行，则预览无法正常工作，因此任何人都没有用。
滥用
“ 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节的规定，您必须提供可访问的替代内容，否则使用辅助技术的人将无法使用它。
评论