Pola Tab: tablist, tab, tabpanel
Hubungkan tiga peran yang diperlukan sekumpulan tab.
Pola Tab: tablist, tab, tabpanel 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 Sebenarnya Kumpulan Tab Itu
Sebuah kumpulan tab menampilkan satu panel pada satu waktu dan memungkinkan pengguna berpindah di antara panel. Bagi teknologi bantu, kumpulan ini harus terlihat sebagai satu widget, bukan tautan yang berdiri sendiri.
Tiga Peran yang Saling Melengkapi
Pola ini mengandalkan tiga peran ARIA: tablist yang memuat tab, setiap tab, dan panel yang ditampilkan oleh setiap tab. Pastikan ketiganya benar.
Wadahnya Adalah tablist
Bungkus baris tab Anda dalam elemen dengan role="tablist". Ini memberi tahu pembaca layar bahwa elemen-elemen di dalamnya merupakan sekumpulan tab yang saling berkaitan.
<div role="tablist">...</div>Setiap Tab Adalah Tombol
Buat setiap tab dari button sungguhan dengan role="tab". Tombol sudah dapat menerima fokus dan diklik, sehingga Anda tidak perlu menambahkan banyak pengaturan.
<button role="tab">Profile</button>Panelnya Adalah tabpanel
Konten yang ditampilkan oleh setiap tab mendapat role="tabpanel". Ini menandainya sebagai wilayah yang dikendalikan oleh tab yang sedang dipilih.
<div role="tabpanel">Profile details</div>Tandai Tab yang Dipilih
Atur aria-selected="true" pada tab aktif dan false pada tab lainnya. Pembaca layar akan mengumumkan tab mana yang sedang dipilih.
<button role="tab" aria-selected="true">Profile</button>Hubungkan Tab ke Panelnya
Arahkan setiap tab ke panelnya menggunakan aria-controls, dengan nilai berupa id panel tersebut. Pengguna akan mengetahui wilayah mana yang dibuka oleh tab.
<button role="tab" aria-controls="p1">Profile</button>Beri Nama Panel dari Tabnya
Berikan aria-labelledby pada panel yang mengarah kembali ke tabnya. Kini panel menggunakan teks tab sebagai nama aksesibelnya.
<div role="tabpanel" aria-labelledby="tab1">...</div>Sembunyikan Panel yang Tidak Aktif
Hanya satu panel yang seharusnya ditampilkan pada satu waktu. Tambahkan atribut hidden ke panel yang tabnya tidak dipilih agar panel tersebut keluar dari halaman.
<div role="tabpanel" hidden>...</div>Beri Label pada Tablist
Tablist memerlukan aria-label yang menjelaskan tujuannya, seperti Account settings. Pengguna akan mendengar kegunaan seluruh kumpulan tab tersebut.
<div role="tablist" aria-label="Account settings">...</div>Seperti Inilah Bunyi yang Didengar
Jika digabungkan, pembaca layar akan mengumumkan sesuatu seperti Profile, tab, selected, 1 of 3. Informasi ini membuat tab benar-benar mudah digunakan.
Pemeriksaan Singkat
Anda sedang menyiapkan wadah yang memuat baris tab. Peran apa yang harus digunakan pada wadah tersebut?
Rangkuman: Pola Tab
Anda telah mempelajari trio tablist, tab, tabpanel. Tandai tab yang dipilih, hubungkan setiap tab ke panelnya, dan sembunyikan panel yang tidak aktif.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola Tab: tablist, tab, tabpanel” gratis?
Ya — teks lengkap “Pola Tab: tablist, tab, tabpanel” 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 “Pola Tab: tablist, tab, tabpanel”?
Hubungkan tiga peran yang diperlukan sekumpulan tab. 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 “Pola Tab: tablist, tab, tabpanel” 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