Treegrid dan Pola Lanjutan Lainnya
Tangani widget gabungan yang paling sulit dengan percaya diri.
Treegrid dan Pola Lanjutan Lainnya 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.
Memasuki Mode Sulit
Beberapa widget memang benar-benar kompleks: treegrid, grid, dan tree menggabungkan baris, kolom, serta simpul yang dapat diperluas sekaligus. 🌳
Apa Itu Treegrid
treegrid adalah grid yang barisnya dapat diperluas dan diciutkan seperti pohon, cocok untuk peramban file dengan folder bertingkat dan kolom informasi terperinci.
Peran Inti
Gunakan role="treegrid" pada wadah, role="row" pada setiap baris, dan role="gridcell" pada sel. Strukturnya mencerminkan grid sungguhan.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Baris yang Dapat Diperluas
Baris yang dapat dibuka memiliki aria-expanded: true saat turunannya ditampilkan dan false saat diciutkan. Baris daun tidak menyertakannya sama sekali.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Kedalaman dengan aria-level
Gunakan aria-level untuk memberi tahu pengguna seberapa dalam posisi suatu baris di dalam pohon. Level 1 adalah tingkat teratas, dan setiap baris bertingkat menambah satu level.
Pergerakan Dua Sumbu
Dalam treegrid, tombol panah bergerak pada kedua sumbu: Atas dan Bawah mengubah baris, sedangkan Kiri dan Kanan berpindah di antara sel atau menciutkan dan memperluasnya.
Tombol untuk Memperluas dan Menciutkan
Pada baris induk, Panah Kanan memperluasnya dan Panah Kiri menciutkannya. Ini sesuai dengan cara tree file desktop bekerja selama ini.
Satu Titik Henti Tab
Seluruh treegrid merupakan satu titik henti tab. Roving tabindex memindahkan fokus sebenarnya di antara sel sehingga widget terasa seperti satu kontrol gabungan.
Atur Ukuran dan Posisi
Untuk baris dinamis atau tervirtualisasi, gunakan aria-setsize dan aria-posinset agar pengguna mendengar jumlah posisi meskipun tidak semua baris ditampilkan.
Home, End, dan Lompatan
Grid tingkat lanjut menambahkan Home dan End untuk melompat ke sel pertama atau terakhir, serta Ctrl bersama Home atau End untuk melompat ke awal atau akhir data.
Rujuk APG
Pola-pola ini tidak mengenal toleransi kesalahan, jadi ikuti contoh APG dengan saksama dan lakukan pengujian menggunakan pembaca layar sungguhan. Kesalahan kecil dapat merusak seluruh widget.
Pemeriksaan Singkat
Anda membuat peramban file yang barisnya terbuka untuk menampilkan baris bertingkat di dalam grid. Peran mana yang tepat?
Rangkuman
treegrid memadukan grid dan tree: baris dengan aria-expanded dan aria-level, tombol panah dua sumbu, serta satu titik henti tab melalui roving tabindex. Andalkan APG dan lakukan pengujian menyeluruh. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Treegrid dan Pola Lanjutan Lainnya” gratis?
Ya — teks lengkap “Treegrid dan Pola Lanjutan Lainnya” 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 “Treegrid dan Pola Lanjutan Lainnya”?
Tangani widget gabungan yang paling sulit dengan percaya diri. 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 “Treegrid dan Pola Lanjutan Lainnya” 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
- Membaca APG: Pola, Tombol, dan Contoh
- Combobox dan Pelengkapan Otomatis yang Tepat
- Menu, Menubar, dan Tombol Menu
- Treegrid dan Pola Lanjutan Lainnya