Tabキーによる要素の選択順を変えたり、要素への選択を許可・拒否する属性

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

こちらが実際のデモになります

DEMO

tabindex属性には数値を指定します。小さい数値から先に選択されていくようになります。しかし、-1等の負の数を設定すると選択されなくなります。

デモでは、「パスワードを忘れた方はこちら」のaタグのtabindex属性に、負の数を設定して選択されないようにしています。

また、デフォルトではTabキーで選択される要素はインタラクティブ･コンテンツに属する要素ですが、tabindex属性をインタラクティブ・コンテンツ以外(例えばdivタグやpタグ等)に適用することによって、その要素もTabキーでフォーカスされるようになります。

インタラクティブ・コンテンツとは

ユーザーがクリックしてリンクを踏む、文字を入力する等操作可能なコンテンツのことです。

なので、インタラクティブ・コンテンツに該当するタグでも、aタグにhref属性がなくユーザーが操作できない場合や、videoタグにcontrol属性がなく動画の再生や一時停止等ができるインターフェースがない場合などは正確にはインタラクティブ・コンテンツには該当しません。

まとめ

基本的には、Tabキーがフォーカスする順番はブラウザが自動で最適化してくれますが、画面のレイアウトによってはTabキーのフォーカスする順番が不都合であり、ユーザーの操作性を向上させたい場合が出てくることも十分にありえます。

使用頻度は低い属性ですが、知っておいて損はないテクニックです。