如何跳过对隐藏元素组的关注？

Question

出于可访问性的原因，隐藏的元素或元素组display: none;会从键盘焦点（Tab 键）中跳过。当元素变得可见时，它再次可以访问，这很棒。

目前我正在使用opacity和right位置来创建 CSS 过渡。这些样式不会使元素从键盘焦点中跳过，这正是我想要实现的目标。

如果可能的话，我想避免添加tabindex="-1"每个内部元素。

.element {
  background-color: black;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 100%;
  top: 0;
  transition: all 0.3s;
  &.is-visible {
    opacity: 1;
    right: 100px;
  }
}

我想要一种方法来隐藏/显示带有过渡的元素，同时保持它从键盘焦点跳过直到它被隐藏。

Answer 1

一种解决方案是添加visibility: hidden到隐藏元素，当它们没有隐藏时CSS返回。visibility: visible

因为，像 一样display: none，它会忽略tabbing, 因为该元素在文档中不再可见，但过渡效果仍然会发生。

像这样：

.element {
  background-color: black;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden
  position: absolute;
  right: 100%;
  top: 0;
  transition: all 0.3s;
  &.is-visible {
    opacity: 1;
    visibility: visible;
    right: 100px;
  }
}

希望能帮助到你。