Javascript 如何使tabindex在div中本地化

我试图举例说明在可访问性方面什么是不好的做法。我有三个关于键盘焦点的例子。第一个例子是，您无法在一组按钮上看到焦点。第二个例子是焦点顺序不符合逻辑。为了完成第二个和第三个示例，我必须将tabindex属性添加到一些标记中

我在理解如何通过前4个按钮（按顺序）进行制表，然后进入表单（按第一个字段、提交、第三个字段和第二个字段的顺序），最后进入一组链接（按顺序，但有一个循环）时遇到了一点困难

目前的情况是，在前4个按钮之间进行tab操作是可行的，但是焦点会转到url地址栏，然后转到输入字段。我希望焦点顺序从一个div转到另一个div。我还要注意，这将在网站的选项卡面板中，所以我希望这是非常孤立的

我希望这有点道理，我在webdev方面没有太多经验。这是代码笔和html供参考！谢谢大家!

代码笔：

按钮：焦点{
大纲：无！重要；
文字装饰：无！重要；
}
不可聚焦按钮

按钮1
按钮2
按钮3
按钮4
非直观焦点顺序

输入1


输入2


投入3


聚焦陷阱（环路）

在内联javascript中，需要确保使用this.tabIndex，因为this.tabIndex不是有效属性

<p>Unfocusable buttons</p>
<div class="buttons">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>
<p>Unintuitive Focus Order</p>
<div class="inputs">
  <form>
    <label>input 1</label>
    <input type="text" onFocus="this.tabIndex+=1;"><br>
    <label>input 2</label>
    <input type="text" onFocus="this.tabIndex+=3;"><br>
    <label>input 3</label>
    <input type="text" onFocus="this.tabIndex+=4;"><br>
    <input type="submit" value="Submit" onFocus="this.tabIndex+=2;">
  </form>
</div>
<p>Focus Trap (Loop)</p>
<div class="links">
  <a href="#" tabindex="5">link 1</a>
  <a href="#" tabindex="6">link 2</a>
  <a href="#" tabindex="7" onFocus="this.tabIndex=4;" onBlur="this.tabIndex=7;">link 3</a>
</div>

不可聚焦按钮

按钮1
按钮2
按钮3
按钮4
非直观焦点顺序

输入1


输入2


投入3


聚焦陷阱（环路）

啊，谢谢！我错过了。另外，这不就是通过前4个按钮、第一个输入字段进行制表，然后直接转到链接吗？我仍然希望其他两个输入字段和submit按钮按tab顺序排列（尽管不按顺序排列）。我的另一个问题是，默认的tabindex不是总是设置为0吗？因此，如果你这样做。tabIndex+=x（其中x是一个数字），这不是和说tabIndex=“x”一样，但只有在焦点被放置好后才这样做吗？@landofall你将在第二和第三个链接中捕获选项卡，因此它将永远不会在页面上继续运行，因为你正在捕获它，它将继续循环。是，默认索引为0，除非已设置。因此，如果您执行onFocus事件，每次聚焦时，选项卡索引都会增加。对，我希望链接保持循环（以演示在我的示例中键盘陷阱是什么），但在第一次演练中，我希望能够通过前4个按钮和表单进行选项卡操作，然后卡在循环中。我认为在代码笔中，在第一次运行时，它通过按钮进行制表，只有第一个输入字段，然后是链接循环。我的问题更多的是如何妥善处理这一问题。谢谢

<p>Unfocusable buttons</p>
<div class="buttons">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>
<p>Unintuitive Focus Order</p>
<div class="inputs">
  <form>
    <label>input 1</label>
    <input type="text" onFocus="this.tabIndex+=1;"><br>
    <label>input 2</label>
    <input type="text" onFocus="this.tabIndex+=3;"><br>
    <label>input 3</label>
    <input type="text" onFocus="this.tabIndex+=4;"><br>
    <input type="submit" value="Submit" onFocus="this.tabIndex+=2;">
  </form>
</div>
<p>Focus Trap (Loop)</p>
<div class="links">
  <a href="#" tabindex="5">link 1</a>
  <a href="#" tabindex="6">link 2</a>
  <a href="#" tabindex="7" onFocus="this.tabIndex=4;" onBlur="this.tabIndex=7;">link 3</a>
</div>