Mengelola tabindex yang Berpindah pada Widget
Biarkan tombol panah berpindah di dalam kontrol gabungan.
Mengelola tabindex yang Berpindah pada Widget adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Satu Perhentian untuk Seluruh Widget
Dalam bilah alat atau grup radio, Tab seharusnya mencapai widget satu kali, bukan setiap item. Roving tabindex adalah pola yang mewujudkan hal ini.
Gagasan Inti
Tepat satu item memiliki tabindex="0" pada satu waktu. Semua item lainnya mendapat tabindex="-1", sehingga Tab memasuki grup melalui satu titik.
Penyiapan Awal
Saat dimuat, berikan tabindex="0" kepada item pertama atau item yang dipilih, lalu tetapkan tabindex="-1" untuk item lainnya. Itulah keadaan awal grup.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>Tombol Panah Berpindah di Dalam
Setelah focus berada di dalam, pengguna berpindah antaritem dengan tombol panah, bukan Tab. Tab tetap digunakan untuk keluar dari seluruh widget.
Langkah Roving
Saat tombol panah ditekan, lakukan dua hal: tetapkan -1 pada item lama dan 0 pada item baru, lalu panggil focus() pada item baru. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Mengapa Hanya Satu Nol
Mempertahankan satu tabindex="0" berarti Tab selalu mendarat pada item yang terakhir digunakan pengguna, sehingga kembali ke widget terasa alami.
Ikuti Pola APG
ARIA Authoring Practices Guide menetapkan tombol yang tepat untuk setiap widget. Ikuti peta papan ketiknya, bukan membuatnya sendiri.
Pembungkusan Opsional
Banyak widget membungkus pergerakan tombol panah: menekan kanan pada item terakhir akan kembali ke item pertama. Periksa APG untuk mengetahui apakah pola Anda seharusnya membungkus.
Home dan End Juga
Widget komposit sering menambahkan Home dan End untuk berpindah ke item pertama dan terakhir, sentuhan kecil yang mempercepat navigasi.
Roving vs aria-activedescendant
Roving tabindex memindahkan focus DOM yang sebenarnya. Alternatifnya, aria-activedescendant, mempertahankan focus pada wadah dan menunjuk ke item aktif virtual.
Uji Seluruh Siklus
Masuk dengan Tab, berpindah melalui setiap item menggunakan tombol panah, keluar lagi dengan Tab, lalu masuk kembali dengan Tab dan pastikan focus kembali ke item yang terakhir digunakan.
Pemeriksaan Singkat
Dalam bilah alat dengan roving tabindex, berapa banyak item yang memiliki tabindex="0" pada satu waktu?
Rangkuman
Anda telah menguasai roving tabindex: satu item bernilai 0, sisanya bernilai -1, tombol panah memindahkan nilai 0 di antara item, dan Tab melewati seluruh widget. 🚀
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengelola tabindex yang Berpindah pada Widget” gratis?
Ya — teks lengkap “Mengelola tabindex yang Berpindah pada Widget” 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 “Mengelola tabindex yang Berpindah pada Widget”?
Biarkan tombol panah berpindah di dalam kontrol gabungan. 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 4 dari 4.
Berapa lama pelajaran “Mengelola tabindex yang Berpindah pada Widget” 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