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

有没有办法在标签时跳过整个内容？它当然不能使用上面的代码.

Answer 1

不知道为什么还没有人提到visibility: hidden。display: none在处理非视觉元素的维度时，设置在某些情况下会弄乱逻辑。visibility将保持尺寸就像opacity: 0会做的那样，但也会禁用任何可选项卡的孩子。

例子：

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

Answer 2

设置tabindex="-1"允许您设置一个元素与脚本的焦点,但并没有把它放在页面的选项卡顺序.它也不会从键盘标签顺序中拉出某些东西.

tabindex="-1" 当你需要将焦点移动到通过脚本或用户操作之外更新的内容时,这是很方便的.

如果您尝试从tabindex中删除元素,无论是对于屏幕阅读器还是键盘用户,您可能必须在以下选项之一中进行选择:

1. 完全隐藏它(通过display: none),
2. 在元素上使用脚本,以便在获得焦点时,脚本将焦点移到其他位置.

没有上下文(工作URL,你想要这样做的原因),这听起来非常像可访问性的反面.除非你有充分的理由,否则我鼓励你不要把焦点弄得一团糟.

Answer 3

可以将一个元素既 可见又不可聚焦，连同它的子元素。

它是通过 HTML 属性完成的inert：https : //html.spec.whatwg.org/multipage/interaction.html#inert。

它尚未得到广泛支持，但有一个 polyfill：https : //github.com/WICG/inert。

npm install --save wicg-inert

require('wicg-inert')

<section inert>
  I am visible, but not focusable! 
</section>