tabindex 0, -1, dan Jangan Pernah Positif
Atur apa yang dapat menerima fokus dan apa yang hanya dapat dikendalikan melalui skrip.
tabindex 0, -1, dan Jangan Pernah Positif adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang Dikendalikan tabindex
Atribut tabindex menentukan apakah suatu elemen dapat menerima focus dari keyboard dan bagaimana posisinya dalam urutan Tab. Atribut ini adalah pengatur kemampuan menerima focus.
Sebagian Besar Elemen Sudah Dapat Menerima Focus
Tautan, tombol, dan input secara bawaan dapat menerima focus, jadi Anda jarang perlu menyentuh tabindex untuk elemen-elemen tersebut. Gunakan hanya ketika elemen bawaan tidak dapat menjalankan tugasnya.
tabindex 0 Bergabung dalam Urutan
Menetapkan tabindex="0" menempatkan elemen yang biasanya tidak dapat menerima focus ke dalam urutan Tab alami, tepat di posisinya dalam DOM.
<div role="button" tabindex="0">Custom action</div>Kapan Menggunakan 0
Gunakan tabindex="0" pada widget khusus yang Anda buat dari div atau span dan harus dapat dijangkau dengan keyboard, seperti sakelar yang dikendalikan skrip.
tabindex -1 Hanya untuk Skrip
Dengan tabindex="-1", elemen dilewati oleh tombol Tab, tetapi tetap dapat menerima focus dari JavaScript menggunakan element.focus().
<div id="panel" tabindex="-1">Result area</div>Mengapa -1 Sangat Berguna
Gunakan tabindex="-1" untuk memindahkan focus ke suatu region setelah tindakan, seperti panel hasil, tanpa menambahkannya ke setiap penekanan Tab. 🎯
Jangan Pernah Menggunakan Nilai Positif
tabindex positif seperti 3 membuat elemen tersebut melompat mendahului semua elemen lain, mengacaukan urutan dan menjebak Anda dalam labirin. Hindari nilai ini.
<input tabindex="3">Nilai Positif Merusak Alur
Elemen dengan nilai positif apa pun akan dikunjungi sebelum semua elemen tabindex="0" dan elemen bawaan, sehingga urutan focus tidak lagi sesuai dengan urutan visual.
Biarkan DOM Menentukan Urutan
Urutan Tab yang paling rapi berasal dari urutan DOM itu sendiri. Susun markup secara logis dan sebagian besar masalah focus akan hilang dengan sendirinya.
Jangan Membuat Semuanya Dapat Menerima Focus
Menambahkan tabindex="0" pada teks biasa atau seluruh wadah akan menciptakan gangguan, sehingga pengguna keyboard harus menekan Tab melewati perhentian yang tidak melakukan apa-apa.
Aturan Praktis Sederhana
Gunakan 0 untuk menambahkan kontrol khusus ke dalam urutan, -1 agar focus hanya dilakukan melalui skrip, dan jangan pernah menggunakan angka positif. Aturan ini mencakup hampir semua kebutuhan.
Pemeriksaan Singkat
Nilai tabindex mana yang membuat elemen dapat menerima focus melalui skrip, tetapi melewatinya dalam urutan Tab?
Ringkasan
Sekarang Anda menguasai pengatur tabindex: 0 menambahkan kontrol khusus ke dalam urutan, -1 memungkinkan focus melalui skrip, dan nilai positif tidak boleh digunakan. 👍
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “tabindex 0, -1, dan Jangan Pernah Positif” gratis?
Ya — teks lengkap “tabindex 0, -1, dan Jangan Pernah Positif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “tabindex 0, -1, dan Jangan Pernah Positif”?
Atur apa yang dapat menerima fokus dan apa yang hanya dapat dikendalikan melalui skrip. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “tabindex 0, -1, dan Jangan Pernah Positif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- tabindex 0, -1, dan Jangan Pernah Positif
- Memindahkan Fokus Setelah Tindakan
- Mengembalikan Fokus Saat Lapisan Ditutup
- Mengelola tabindex yang Berpindah pada Widget