tabindex 0、-1、そして正の値は使わない

tabindex属性は、要素がキーボードフォーカスを受け取れるかどうかと、Tab移動の順序にどう組み込まれるかを決めます。フォーカス可能性を調整するつまみです。

リンク、ボタン、入力欄はデフォルトでフォーカス可能なので、これらにtabindexを設定することはほとんどありません。ネイティブ要素では対応できない場合だけ使用してください。

tabindex="0"を設定すると、通常はフォーカスできない要素が自然なTab移動の順序に加わります。順序はDOM内の位置に従います。

divやspanから作成したカスタムウィジェットなど、キーボードで操作できる必要がある要素にはtabindex="0"を使います。

tabindex="-1"を設定すると、その要素はTabキーではスキップされますが、JavaScriptからelement.focus()を使ってフォーカスできます。

tabindex="-1"を使うと、結果パネルのような領域に操作後のフォーカスを移動できます。すべてのTab移動にその領域を追加する必要はありません。🎯

3のような正のtabindexを設定すると、その要素が他のすべてより前に移動し、順序が崩れて迷路のようになります。使用しないでください。

正の値を持つ要素は、tabindex="0"の要素やデフォルトの要素より先に移動されるため、フォーカスの順序が視覚的な順序と一致しなくなります。

最も自然なTab移動の順序は、DOMの順序そのものから生まれます。マークアップを論理的に並べれば、フォーカスに関する問題の多くは自然に解消します。

通常のテキストやコンテナ全体にtabindex="0"を追加するとノイズが生まれ、キーボードユーザーは何も起こらない停止位置をTabで通過しなければならなくなります。

カスタムコントロールを順序に加えるには0、スクリプトだけでフォーカスするには-1を使い、正の数は決して使わないでください。これでほとんどの場合に対応できます。

tabindexというつまみの使い方を学びました。0はカスタムコントロールを順序に加え、-1はスクリプトによるフォーカスを可能にし、正の値は使用しません。👍