div内にローカライズされたtabindexを作成する方法

Question

アクセシビリティの面で悪い習慣の例を挙げようとしています。私はキーボードフォーカスと関連がある3つの例があります。最初の例は、一連のボタンにフォーカスを当てることができないということです。第2の例は、フォーカス順序が論理的でないことである。 2番目と3番目の例を達成するために、タグのいくつかにtabindex属性を追加する必要があります。

最初の4つのボタンをどのように順番にタブしてから（最初のフィールド、サブミット、3番目のフィールドの順に）フォームに移動するのか少し問題があります次に2番目のフィールド）、最後にリンクのdivに移動します（順序は同じですが、ループがあります）。

現在のところ、最初の4つのボタンのタブが機能しますが、フォーカスはURLのアドレスバーに、次に入力フィールドに移動します。フォーカスの順序をdivからdivにしたい。また、これはウェブサイト上のタブパネルに表示されるので、私はこれをかなり孤立させたいと考えています。

私はそれが少し意味があることを望む、私はwebdevであまり経験がありません。参考のためにCodepenとhtmlがあります！ありがとうございました！

Codepen：this.tabindexが有効なプロパティではありませんよう、あなたは、this.tabIndexを使用して確認する必要がありjavascriptのごインラインで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

。

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