Navigasi Antar-Tab dengan Tombol Panah
Biarkan pengguna berpindah tab menggunakan papan ketik.
Navigasi Antar-Tab dengan Tombol Panah adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Tab Bukan Sekadar Sesuatu yang Dapat Diklik
Kumpulan tab yang benar dikendalikan oleh papan ketik, bukan hanya tetikus. Pola APG mengharapkan tombol panah digunakan untuk berpindah antar-tab.
Tablist Adalah Satu Titik Tab
Menekan Tab seharusnya membawa Anda ke kumpulan tab satu kali saja, bukan berhenti pada setiap tab. Seluruh tablist bertindak sebagai satu titik dalam urutan halaman.
Hanya Satu Tab yang Dapat Dijangkau dengan Tab
Berikan tabindex="0" pada tab aktif dan tabindex="-1" pada semua tab lainnya. Inilah tabindex berpindah yang mencegah Tab mengunjungi semuanya.
<button role="tab" tabindex="0">Profile</button>Tombol Panah Memindahkan Fokus
Di dalam tablist horizontal, panah Kanan dan Kiri memindahkan fokus dari satu tab ke tab berikutnya. Begitulah pengguna papan ketik menjelajahi kumpulan tab.
Gunakan Atas dan Bawah untuk Tab Vertikal
Jika tab Anda tersusun secara vertikal, gunakan panah Atas dan Bawah. Atur aria-orientation="vertical" agar teknologi bantu mengetahui tata letaknya.
<div role="tablist" aria-orientation="vertical">...</div>Kembali ke Awal di Ujung
Saat fokus berada pada tab terakhir dan pengguna menekan panah berikutnya, lakukan perulangan kembali ke tab pertama. Perulangan membuat navigasi tetap lancar dan mudah diprediksi.
Home dan End Berpindah Jauh
Tambahkan dua pintasan: Home memindahkan fokus ke tab pertama dan End memindahkannya ke tab terakhir. Kumpulan tab yang panjang menjadi jauh lebih cepat dinavigasi.
Pindahkan Indeks Berpindah
Saat panah memindahkan fokus, perbarui tabindex: atur tab yang baru mendapat fokus menjadi 0 dan tab sebelumnya menjadi -1, lalu panggil focus pada tab tersebut.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Aktivasi Otomatis
Dengan aktivasi otomatis, memfokuskan tab juga memilihnya dan menampilkan panelnya. Rasanya instan, tetapi dapat membebani kinerja jika panel membutuhkan banyak sumber daya.
Aktivasi Manual
Dengan aktivasi manual, tombol panah hanya memindahkan fokus; pengguna menekan Enter atau Spasi untuk memilih. Pilih cara ini jika menampilkan panel membutuhkan banyak sumber daya.
Mengapa Ini Penting
Tanpa dukungan tombol panah, pengguna papan ketik harus menekan Tab melewati setiap tab dan panel. Penanganan tombol yang tepat membuat widget efisien, bukan sekadar dapat dijangkau.
Pemeriksaan Singkat
Fokus berada pada sebuah tab dalam tablist horizontal. Pengguna menekan panah Kanan. Apa yang seharusnya terjadi?
Rangkuman: Navigasi dengan Panah
Anda telah mempelajari bahwa tab menggunakan tabindex berpindah dengan tombol panah, serta Home dan End. Pilih aktivasi otomatis atau manual berdasarkan biaya pemuatan panel.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Navigasi Antar-Tab dengan Tombol Panah” gratis?
Ya — teks lengkap “Navigasi Antar-Tab dengan Tombol Panah” 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 “Navigasi Antar-Tab dengan Tombol Panah”?
Biarkan pengguna berpindah tab menggunakan papan ketik. 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 2 dari 4.
Berapa lama pelajaran “Navigasi Antar-Tab dengan Tombol Panah” 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
- Pola Tab: tablist, tab, tabpanel
- Navigasi Antar-Tab dengan Tombol Panah
- Akordeon dengan Button dan aria-expanded
- Disclosure vs Tab: Pilih yang Tepat