如何跳过隐藏元素组的焦点？

Question

如何跳过隐藏元素组的焦点？

5

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;
  }
}

我希望有一种方法可以用过渐变的方式隐藏/显示元素，同时保持在隐藏状态下不受键盘焦点影响。

- dekisha

如果你正在处理无障碍性问题，建议添加 'aria-hidden="true"' 属性。详见 https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content - danielarend

1

我确实是，但这个属性并不意味着它被排除在键盘焦点之外。 - dekisha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Azametzin · Accepted Answer

一种解决方案是将CSS中隐藏元素的visibility: hidden，在不隐藏时恢复为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;
  }
}

希望能对您有所帮助。