概要
キーボードのタブ操作でのフォーカス移動をtabindex属性を使って任意の順番にする要件
- マウスのカーソル移動だけでなくキーボードのタブ操作でフォーカス移動ができる
- アクセシビリティ向上に繋がる
検証ブラウザ
- Microsoft Edge(最新)
- IE11
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<ul>
<li>
<a href="#" tabindex="2">tabindex2</a>
</li>
<li>
<a href="#" tabindex="1">tabindex1</a>
</li>
<li>
<a href="#" tabindex="4">tabindex4</a>
</li>
<li>
<a href="#" tabindex="3">tabindex3</a>
</li>
<li>
<a href="#" tabindex="5">tabindex5</a>
</li>
</ul>
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)