Question

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

我很难理解如何能够通过前4个按钮（按顺序）进行制表，然后移动到表格上（按照第一个字段，提交，第三个字段的顺序，然后第二个字段），然后最终到一个div链接（按顺序，但有一个循环）。

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

我希望这有点意义，我在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>

如何使tabindex本地化在div中

1 个答案: