[翻译]How-to: Hide content(未完成)

[JiatLn]

如何隐藏内容

link: How-to: Hide content

开发者通常使用 display: none 在页面中隐藏内容。但是，这种常见的行为对于使用屏幕阅读器的人来说可能是有问题的，特别是隐藏的内容旨在为他们发现……

内容应该在现实视觉下隐藏，而在使用屏幕阅读器等辅助技术下保持可见。例如，使用一个放大镜图标代替搜索框的 label 标签。
（注：为了让视觉障碍者知道这是一个搜索框）

clip pattern 可以帮助你实现这个目标。隐藏可视内容，同时对屏幕阅读器友好。不同于CSS的定位和负文字缩进技术，clip pattern 还支持从右到左（RTL）的本地化语言。有关更多视觉上隐藏模式的信息可以请参见文章 Hiding Content for Accessibility。也可以看 Beware smushed off-screen accessible text 的代码片段：

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

在原生的可聚焦的元素（如 a，button，input 等标签上添加 .visually-hidden 的类名，则可以接收键盘焦点。Otherwise, a sighted keyboard user would have to try and figure out where their visible focus indicator had gone to. （TODO: 不太好翻译）

对于IE9以上的浏览器，隐藏可见的选择器可以写成：

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

这可以保证交互式元素获得焦点时，.visually-hidden 的样式不会生效，以及焦点的内容会暴露出来。

display: none 的替代方案

aria-hidden="true" 属性的效果与 .visually-hidden 相反。它只对视觉辅助技术隐藏内容。可以很好的隐藏一些对于使用屏幕阅读器的用户来说不重要的元素，比如在有文本说明的情况下的装饰性图标。

在使用 aria-hidden 的情况下，有时也需要在视觉上隐藏内容，可以使用 aria-hidden 属性选择器处理：

.my-component[aria-hidden="true"] {
  display: none;
}

Another way to hide content both visually and from assistive technology is the HTML5 hidden attribute. To support older browsers like IE9, and to increase the specificity of the hidden attribute, you can add the following snippet to your CSS:

[hidden] {
  display: none !important;
}