Combobox dan Pelengkapan Otomatis yang Tepat
Buat pilihan yang dapat dicari dan dipahami pembaca layar.
Combobox dan Pelengkapan Otomatis yang Tepat 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.
Pengertian Combobox
Combobox adalah input yang dipasangkan dengan pop-up berisi saran. Bayangkan kotak pencarian yang menampilkan hasil yang cocok saat Anda mengetik. 🔍
Dua Bagian yang Bekerja Bersama
Combobox memiliki input teks yang digunakan pengguna untuk mengetik dan daftar listbox sembulan terpisah yang berisi opsi. ARIA menghubungkan keduanya agar pembaca layar dapat mengaitkannya.
Peran pada Input
Letakkan role="combobox" pada input teks itu sendiri. Ini memberi tahu teknologi asistif bahwa mengetik di sini akan menampilkan daftar pilihan.
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">Arahkan ke Sembulan
Gunakan aria-controls pada input dan atur nilainya ke id sembulan. Ini menghubungkan bidang tersebut dengan listbox yang dibuka dan ditutupnya.
Umumkan Status Terbuka atau Tertutup
Ubah aria-expanded menjadi true saat daftar ditampilkan dan false saat disembunyikan. Pembaca layar mengumumkan status sembulan dari atribut ini.
Sembulan Adalah Listbox
Wadah saran menggunakan role="listbox" dan setiap saran menggunakan role="option". Ini memberikan daftar yang familier dan mudah dinavigasi bagi pengguna.
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>Fokus Tetap di Input
Inilah triknya: fokus papan ketik tidak pernah meninggalkan input. Pengguna tetap mengetik sementara tombol panah memindahkan sorotan di antara opsi.
aria-activedescendant
Arahkan aria-activedescendant pada input ke id opsi yang disorot. Dengan begitu, pembaca layar dapat membacakan pilihan aktif tanpa memindahkan fokus sebenarnya.
<input role="combobox"
aria-activedescendant="o1">Tombol yang Diharapkan
Panah Bawah dan Panah Atas berpindah di antara opsi, Enter memilih opsi aktif, dan Escape menutup sembulan. Tombol-tombol ini langsung berasal dari APG.
Tandai Opsi yang Dipilih
Atur aria-selected="true" pada opsi yang disorot dan false pada opsi lainnya. Dalam combobox pilihan tunggal, hanya satu opsi yang boleh dipilih pada satu waktu.
Perilaku Pelengkapan Otomatis
Gunakan aria-autocomplete untuk menjelaskan cara saran ditampilkan: "list" untuk menu yang difilter atau "both" saat teks juga dilengkapi secara sebaris.
Pemeriksaan Singkat
Pengguna menekan panah ke bawah untuk menelusuri saran combobox Anda. Atribut mana yang memberi tahu pembaca layar opsi mana yang aktif?
Rangkuman
combobox adalah input yang dipadukan dengan listbox: hubungkan keduanya dengan aria-controls dan aria-expanded, pertahankan fokus di bidang tersebut, dan lacak opsi aktif dengan aria-activedescendant. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Combobox dan Pelengkapan Otomatis yang Tepat” gratis?
Ya — teks lengkap “Combobox dan Pelengkapan Otomatis yang Tepat” 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 “Combobox dan Pelengkapan Otomatis yang Tepat”?
Buat pilihan yang dapat dicari dan dipahami pembaca layar. 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 “Combobox dan Pelengkapan Otomatis yang Tepat” 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