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 masih dapat difokus dengan memanggil metode focus()-nya.

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

Buat semuanya berputar!

.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 ✨