如何使 tabindex 在 div 中本地化

Question

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

我有点难以理解我如何能够通过前 4 个按钮（按顺序）切换，然后移动到表单（按第一个字段、提交、第三个字段的顺序，然后第二个字段），然后最后进入链接的 div（按顺序，但有一个循环）。

目前发生的情况是，通过前 4 个按钮切换是可行的，但随后焦点转到 url 地址栏，然后转到输入字段。我希望焦点顺序从 div 到 div。我还要注意，这将在网站的标签面板中，所以我希望它是非常独立的。

我希望这有点道理，我在 webdev 方面没有太多经验。这是 Codepen 和 html 供参考！谢谢！

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