在分頁順序中插入元素
使用 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
polyfill。polyfill 會模擬提議的 inert
屬性行為,防止輔助技術選取或讀取元素。
盡情揮灑創意!
.loader {
animation: spin 0.75s infinite steps(var(--count));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
留意要用 steps(var(--count))
讓效果達到最佳效果 ✨