CodePen

タブオーダーに要素を挿入する

tabindex="0" を使用して、自然なタブオーダーに要素を挿入します。例:

<div tabindex="0">Focus me with the TAB key</div>

要素をフォーカスするには、Tab キーを押すか、要素の focus() メソッドを呼び出します。

タブオーダーから要素を削除する

tabindex="-1" を使用して要素を削除します。例:

<button tabindex="-1">Can't reach me with the TAB key!</button>

これにより、自然なタブオーダーから要素が削除されますが、focus() メソッドを呼び出すことで、引き続き要素にフォーカスできます。

なお、要素に tabindex="-1" を適用しても、その子は変わりません。子が自然にタブオーダーにある場合や、tabindex 値によりタブオーダーである場合、それらの子はタブオーダーに残ります。タブオーダーから要素とそのすべての子を削除するには、WICG の inert ポリフィルの使用を検討してください。ポリフィルは、提案された inert 属性の動作をエミュレートします。これにより、支援技術による要素の選択や読み取りができなくなります。

回転させてみる！

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

適切な効果を得るために steps(var(--count)) を使用している点に注意してください ✨