とあるサイトを閲覧していた際に、使ったことのない「tabindex」属性を見つけたのでまとめてみました。

tabindexとは？

まず、mdn web docsでは以下のように説明されています。

tabindex グローバル属性は、開発者が HTML要素をフォーカス可能にし、（ふつうは名前の由来である Tab キーによる）順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。

HTML 要素がレンダリングされ、その tabindex 属性が有効な整数値である場合、その要素は JavaScript で（focus() メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。

どういうことか、ソースコードを使って解説します。

解説用ソースコード

<div>
    <p>inputタグ1：</p><input type="text">
</div>
<div>
    <p>inputタグ2：</p><input type="checkbox">
</div>
<div>
    <p>inputタグ3：</p><input type="button" value="ボタン">
</div>

そもそも、「input」や「a」などの一部のタグは上記の属性を設定しなくてもtabキーでフォーカスすることができます。（下記gifの黒い線に囲われた部分がフォーカスされている部分です。）

でも、「div」や「p」で囲っている部分についてはフォーカスはされていませんね。
こういったタグにもtabフォーカスができるようになったり、逆にフォーカスさせないようにする、ということができるようですね。

フォーカスさせてみよう

さっそく「p」タグにtabフォーカスをさせてみましょう。
下記のようにtabindexを入れてあげると…

<p tabindex="0">inputタグ1：</p>

「inputタグ1：」もフォーカスされるようになりましたね。
「tabindex="1"」「tabindex="2"」「tabindex="3"」などと指定してあげれば、この順番通りにtab選択できるようになります。

フォーカスを防止してみよう

今度は「inputタグ2：」にあるチェックボックスがフォーカスされないようにしてみましょう。

<input type="checkbox" tabindex="-1">

負の数を付けてあげることで、このようにフォーカス防止ができます。

追記：注意事項

@juner(jun maeda)さんからコメントをいただきましたので、こちらにも追記します。

ただし、

警告: tabindex の値として、0 と -1 のみを使用することをお勧めします。tabindex の値を 0 より大きくしたり、フォーカス可能な HTML 要素の順序を変更できる CSS プロパティ（フレックスアイテムの並べ替え）を使用したりしないようにしましょう。これは、キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。代わりに、論理的な順序で要素を記述してください。
とあるので基本的には tabindex は 0(初期値) か-1(非フォーカス) の使用に限定するべきですね。

まとめ

・tabindexはtabフォーカスを新しくつける事ができる
・順番の指定も行えるが、値は0 か -1 のみに限定する
・フォーカスを防止することもできる

tabindexを指定しておくことでスムーズなページ移動ができるようになります。
webデザインは「上から下」「左から右」といった導線がほとんどですので、このルールに則っているのであれば付ける事によって逆に混乱のもとになります。乱用しないようにしましょう。