タブオーダーに要素を挿入する
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))
を使用している点に注意してください ✨