WebサイトにおいてCSSの構造によってはTabキーの順番が意図した通りに動作してくれない時があります。
HTMLのtabindex属性を活用することで、Tabキーの選択順序を変更することができます。
まずは以下の例を見てみましょう。
tabindex属性の使い方
こちらの例では、タブオーダー順がデフォルトの設定になっています。
今回は、これを下記の様に設定していきます。
HTML
<h1 style="font-size:20px;">サインインしてください。</h1>
<form role="form" action="#" method="post">
<div class="form-group">
<fieldset style="width:200px; margin: 10px 0px;">
<legend>Sign In</legend>
<label for="name">ユーザーネーム</label><br>
<input type="text" class="form-item" id="name" required><br>
<label for="password">パスワード</label><br>
<input type="password" class="form-item" id="password" required><br>
</fieldset>
<button type="submit" value="SEND MESSAGE" class="form-item">送信</button><br>
<input type="checkbox" id="checkbox" class="form-item" tabindex="-1">
<label for="checkbox">Keep me signed in.</label>
<p class="form-item"><a href="#">パスワードを忘れた方はこちら</a></p>
</div>
</form>
CSS
.form-item{
margin-bottom: 10px;
}
こちらが実際のデモになります
tabindex属性には数値を指定します。小さい数値から先に選択されていくようになります。しかし、-1等の負の数を設定すると選択されなくなります。
デモでは、「パスワードを忘れた方はこちら」のaタグのtabindex属性に、負の数を設定して選択されないようにしています。
また、デフォルトではTabキーで選択される要素はインタラクティブ・コンテンツに属する要素ですが、tabindex属性をインタラクティブ・コンテンツ以外(例えばdivタグやpタグ等)に適用することによって、その要素もTabキーでフォーカスされるようになります。
インタラクティブ・コンテンツとは
ユーザーがクリックしてリンクを踏む、文字を入力する等操作可能なコンテンツのことです。
なので、インタラクティブ・コンテンツに該当するタグでも、aタグにhref属性がなくユーザーが操作できない場合や、videoタグにcontrol属性がなく動画の再生や一時停止等ができるインターフェースがない場合などは正確にはインタラクティブ・コンテンツには該当しません。
まとめ
基本的には、Tabキーがフォーカスする順番はブラウザが自動で最適化してくれますが、画面のレイアウトによってはTabキーのフォーカスする順番が不都合であり、ユーザーの操作性を向上させたい場合が出てくることも十分にありえます。
使用頻度は低い属性ですが、知っておいて損はないテクニックです。