javascript - 如何使 tabindex 在 div 中本地化

Question

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

我在理解如何通过前 4 个按钮(按顺序)然后移动到表单上(按第一个字段、提交、第三个字段的顺序，然后第二个字段)，然后最后放在链接的 div 上(按顺序，但有一个循环)。

目前发生的情况是，通过前 4 个按钮按 Tab 键可以工作，但焦点会转到 url 地址栏，然后转到输入字段。我希望焦点顺序从一个 div 到另一个 div。我还会注意到，这将位于网站的标签面板中，因此我希望它非常独立。

我希望这有点道理，我在 webdev 方面没有太多经验。这里有Codepen和html供引用!谢谢!

代码笔:https://codepen.io/anon/pen/ZyaMrP

<style>
button:focus {
  outline: none !important;
  text-decoration: none !important;
}
</style>

<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" tabindex="1"><br>
    <label>input 2</label>
    <input type="text" tabindex="4"><br>
    <label>input 3</label>
    <input type="text" tabindex="2"><br>
    <input type="submit" value="Submit" tabindex="3">
  </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>

Answer 1

https://codepen.io/anon/pen/awVRmm

在你的内联 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>