包含隐藏 | CSS-Tricks

Scott O’Hara 最近发表了“包含隐藏”，一篇关于在 Web 上隐藏事物不同方式的优秀文章。在 Web 世界中，事情永远不会一成不变！让人困惑的是，“隐藏”引出了一个问题：隐藏对谁来说？针对这个问题的不同答案有不同的解决方案

对所有人隐藏？ display: none; 或 visibility: hidden; 或 hidden 属性。（但要注意 hidden 属性，Monica Dinculescu 说。）
视觉上隐藏，但对辅助技术可见？ 使用 .screen-reader-only 类，并包含一些属性来正确执行此操作。
对辅助技术隐藏，但视觉上可见？ 使用 aria-hidden="true" 属性/值。

理解这些内容很有价值，因为这是 HTML 和 CSS 为什么不是前端 Web 开发中一种简单附加技能的完美例子。这是至关重要的内容，并没有像应有的那样得到正确的处理。

如果您喜欢视频，我录制了一个名为 “用 CSS 隐藏事物” 的视频，内容涵盖了其中很多内容。

/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */

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

在我写这些的时候，我刚从旧金山参加完 Smashing Conf。Sara Soueidan 做了一个精彩的演讲，涵盖了一些“隐藏事物”的情况，这些情况甚至比我们习惯看到的更不直观。

她介绍的一点是 inert 属性以及它如何用于从键盘选项卡中跳过交互式元素。它甚至可以用于父元素，从而使它内部的所有内容都失效。我理解了这部分，但我并不完全理解它为什么有用，因为它似乎可以与 display: none; 类似，如果一个元素被隐藏并且它内部的元素不应处于焦点状态。但我相信是我的理解不足，所以我期待着 Sara 的视频发布，以便我可以重新观看。它与保持一个不尴尬的选项卡顺序有关。

Sara 还介绍了另一个方面，一些使用辅助技术的人也会倾向于使用带有触觉反馈的触摸屏，用手指在页面上移动以寻找交互式元素。例如，如果您用一个样式化的复选框替换了一个本机复选框，则可以使用一个真实的复选框来隐藏并用图形替换它，从而实现几乎无障碍，但 Sara 演示了如何调整复选框的大小使其覆盖在替换元素之上，并使用 opacity: 0; 进行视觉隐藏——这确保了用户仍然可以通过触摸找到元素。这似乎不是这种事情的默认教授或构建方式，因此看到 Sara 指出这一点真是太好了。另一个例子表明 HTML 和 CSS 是微妙而复杂的语言。

直接链接 →

评论