保持响应式世界中的可访问性

Scott Jehl 的最新文章中有一点 CSS 技巧。您可能曾经使用过“可访问隐藏”技术？也就是说，您有意避免使用 display: none;，因为您希望元素可聚焦，但不想在视觉上显示。

但是… 这对于任何使用键盘导航网站并同时查看屏幕的人来说都可能很尴尬。

为了避免这种情况，我们试着记住任何可访问隐藏的内容在获得焦点时都应该可见。例如，以下 CSS 将将一个获得焦点的元素放置在视窗的顶部

.accessible-hidden {
  position: absolute;
  top: 0;
  left: -999px;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.accessible-hidden:focus {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px;
  /* etc etc... */
}

Scott 感谢 Joe Watkins 提出这个想法。

直接链接 →