tabindex -1 不适用于子元素

Question

我有一个 div 标签，里面加载了一些内容。里面的内容可以有按钮、锚点元素等，它们是可聚焦的。我无法控制内容，但我可以修改“div”标签属性。

我的问题是即使我将 tabIndex -1 指定给 div 标签，焦点仍然会转到内容（锚点、按钮等）。

 <!-- HTML content here -->
<div tabindex="-1" id="externalContent">
  <div>
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
  </div>
</div>
<!-- HTML content here -->

有没有办法在 tab 时跳过整个内容？它肯定不适用于上面的代码。

原文由 Adarsh Konchady 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

设置 tabindex="-1" 允许您使用脚本设置元素的焦点，但 不会 将其放在页面的 Tab 顺序中。它也不会从键盘选项卡顺序中 拉出 某些东西的孩子。

tabindex="-1" 当您需要将焦点移动到您通过脚本或用户操作之外更新的内容时，它很方便。

如果您试图从 tabindex 中完全删除一个元素，无论是对于屏幕阅读器还是键盘用户，您可能必须在以下之一中进行选择：

1. 完全隐藏它（通过 display: none ），
2. 在元素上使用脚本，以便当它获得焦点时，脚本将焦点转移到其他地方。

如果没有上下文（一个有效的 URL，一个你想要这样做的原因），这听起来很像可访问性的 _对立面_。我鼓励你不要乱用焦点，除非你有很好的理由。

原文由 aardrian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不确定为什么还没有人提到 visibility: hidden 。在处理非可视元素的维度时，设置 display: none 在某些情况下可能会弄乱逻辑。 visibility 将像 opacity: 0 一样保持尺寸，但也会禁用任何可制表的孩子。

例子：

 <div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>

原文由 Nordling Art 发布，翻译遵循 CC BY-SA 4.0 许可协议