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

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

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

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

tabindex - HTML: HyperText Markup Language | MDN

tabindex グローバル属性は、開発者が HTML要素をフォーカス可能にし、（ふつうは名前の由来である 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.