CodePen

bookmark_border コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

タブ順序に要素を挿入する

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)) を使用していることに注意してください。✨