CodePen

Sekme sırasına bir öğe ekle

tabindex="0" kullanarak doğal sekme sıralamasına bir öğe ekleyin. Örneğin:

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

Bir öğeye odaklanmak için Tab tuşuna basın veya öğenin focus() yöntemini çağırın.

Sekme sıralamasından bir öğeyi kaldırma

tabindex="-1" kullanarak bir öğeyi kaldırın. Örneğin:

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

Bu işlem, bir öğeyi doğal sekme sıralamasından kaldırır ancak focus() yöntemini çağırarak öğeye yine de odaklanılabilir.

Bir öğeye tabindex="-1" uygulanmasının alt öğeleri etkilemediğini unutmayın. Doğal olarak sekme sırasında veya tabindex değeri nedeniyle sekme sıralamasında kalırlar. Bir öğeyi ve tüm alt öğelerini sekme sıralamasından kaldırmak için WICG'nin inert çoklu dolgusunu kullanabilirsiniz. Çoklu dolgu, önerilen bir inert özelliğinin davranışını emüle eder. Bu işlem, öğelerin seçilmesini veya yardımcı teknolojiler tarafından okunmasını engeller.

Her şey yolunda!

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

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

Doğru etkiyi elde etmek için steps(var(--count)) kullanın ✨