tabindex=0 tabindex=-1（負数）の違い

tabindex=0 tabindex=-1（負数）の違い

MDNを見ると、tabindex=-1（負数）については以下の説明がされている。

負の数 (ふつう tabindex=”-1″) は、その要素がキーボードの順次ナビゲーションでは到達できませんが、 JavaScript や視覚的にフォーカスを持つことができるという意味です。これは主に、 JavaScript で操作可能なウィジェットを作成するのに有用です。

tabindex - HTML: HyperText Markup Language | MDN

tabindex グローバル属性は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示します。

developer.mozilla.org

• -1 ・・・ tabキーを連打してもフォーカスされない
• 0 ・・・ tabキーを連打するとフォーカスされる

tabindex=”0″サンプル

See the Pen Untitled by Hidenobu Miyata (@gari8641) on CodePen.

tabindex=”-1″サンプル

See the Pen Untitled by Hidenobu Miyata (@gari8641) on CodePen.