CodePen

Menyisipkan elemen ke dalam urutan tab

Sisipkan elemen ke dalam urutan tab alami menggunakan tabindex="0". Contoh:

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

Untuk memfokuskan elemen, tekan tombol Tab atau panggil metode focus() elemen.

Menghapus elemen dari urutan tab

Hapus elemen menggunakan tabindex="-1". Contoh:

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

Tindakan ini akan menghapus elemen dari urutan tab alami, tetapi elemen tersebut masih dapat difokuskan dengan memanggil metode focus()-nya.

Perhatikan bahwa menerapkan tabindex="-1" ke elemen tidak memengaruhi turunannya; jika berada dalam urutan tab secara alami atau karena nilai tabindex, elemen tersebut akan tetap berada dalam urutan tab. Untuk menghapus elemen dan semua turunannya dari urutan tab, pertimbangkan untuk menggunakan polyfill inert WICG. Polyfill mengemulasikan perilaku atribut inert yang diusulkan, yang mencegah elemen dipilih atau dibaca oleh teknologi pendukung.

Mulailah.

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

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

Perhatikan penggunaan steps(var(--count)) untuk mendapatkan efek yang tepat ✨