Setiap Input Membutuhkan label Asli
Hubungkan label dan kolom agar ketukan serta pembacaan berfungsi.
Setiap Input Membutuhkan label Asli 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.
Mengapa Label Penting
Bidang formulir tanpa nama seperti kotak misterius. Label yang sebenarnya memberi tahu setiap pengguna, baik yang dapat melihat maupun tidak, apa yang harus diketik. 🏷️
Elemen label
Elemen label adalah cara bawaan HTML untuk memberi nama pada bidang. Peramban, pembaca layar, dan area ketuk semuanya memahaminya secara otomatis.
Hubungkan dengan for dan id
Hubungan yang paling rapi adalah menggunakan for pada label yang cocok dengan id input. Kini keduanya resmi dipasangkan.
<label for="email">Email</label>
<input id="email" type="email">id Harus Unik
id yang Anda tuju harus unik di halaman. Dua input yang menggunakan id yang sama akan diam-diam merusak hubungan tersebut.
Membungkus Juga Bisa
Anda juga dapat membungkus input di dalam label. id tidak diperlukan karena struktur bertingkat sudah memperjelas hubungannya.
<label>Email
<input type="email">
</label>Area Klik Lebih Besar
Label yang terhubung memberi pengguna area klik yang lebih besar. Mengetuk teks akan memfokuskan atau mencentang bidang, sehingga membantu pengguna dengan tangan yang kurang stabil dan layar kecil.
Pembaca Layar Membacakannya
Saat fokus berpindah ke input yang dipasangkan, pembaca layar mengucapkan label terlebih dahulu. Tanpanya, pengguna hanya mendengar jenis bidang tersebut.
title Tidaklah Cukup
Atribut title mungkin tampil saat diarahkan, tetapi tidak dapat diandalkan pada perangkat sentuh dan papan ketik. Atribut ini bukan pengganti label yang sebenarnya.
Kotak Centang Juga Membutuhkan Label
Kotak centang dan tombol radio terlihat jelas secara visual, tetapi labellah yang membuatnya dapat diketuk dan diumumkan. Jangan pernah membiarkannya tanpa label.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Yang Terlihat Lebih Baik daripada yang Tersembunyi
Jaga agar label tetap terlihat jika memungkinkan. Pengguna yang dapat melihat tetapi mengalami beban kognitif juga sama-sama diuntungkan seperti pengguna pembaca layar.
Saat Anda Harus Menyembunyikannya
Jika kotak pencarian tidak memiliki ruang untuk teks, sembunyikan label dengan kelas visually-hidden, jangan gunakan display none, agar label tetap diterima teknologi bantu.
Pemeriksaan Singkat
Bagaimana label mengetahui input mana yang diberinya nama?
Rangkuman
Setiap input membutuhkan label yang sebenarnya, yang dihubungkan melalui for dan id atau dengan cara membungkusnya. Kebiasaan sederhana ini membuat formulir dapat diketuk, dibaca, dan dipahami. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Setiap Input Membutuhkan label Asli” gratis?
Ya — teks lengkap “Setiap Input Membutuhkan label Asli” 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 “Setiap Input Membutuhkan label Asli”?
Hubungkan label dan kolom agar ketukan serta pembacaan berfungsi. 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 “Setiap Input Membutuhkan label Asli” 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
- Setiap Input Membutuhkan label Asli
- Placeholder Bukan Label
- Kelompokkan Kolom dengan fieldset dan legend
- Teks Bantuan dan Kolom Wajib yang Diumumkan