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 polyfill。polyfill 會模擬建議的 inert 屬性行為，避免輔助技術選取或讀取元素。

讓一切運作起來！

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

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

請注意，您必須使用 steps(var(--count)) 才能獲得正確的效果 ✨