Placeholder Bukan Label
Mengapa petunjuk yang hilang menyusahkan pengguna sebenar.
Placeholder Bukan Label ialah pelajaran Web Accessibility Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Web Accessibility Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Web Accessibility Academy merangkumi sejumlah 4 pelajaran.
Jalan Pintas yang Menggoda
Memang menggoda untuk meletakkan teks petunjuk dalam medan dan mengabaikan label. Namun, ruang letak ialah petunjuk, bukan nama. ⚠️
Ia Hilang
Sebaik sahaja seseorang mula menaip, ruang letak itu hilang. Kini tiada apa-apa lagi yang menerangkan tujuan medan tersebut.
<input type="text" placeholder="Full name">Beban Mengingat
Pengguna yang menghadapi cabaran ingatan atau perhatian perlu mengingati petunjuk itu selepas ia hilang. Label yang sentiasa kelihatan menghapuskan beban tersebut.
Kontras Rendah Secara Lalai
Teks ruang letak biasanya berwarna kelabu cerah, yang sering tidak mematuhi peraturan kontras. Pengguna dengan penglihatan terhad mungkin langsung tidak dapat membacanya.
Nampak Seperti Sudah Diisi
Teks petunjuk berwarna kelabu boleh kelihatan seperti nilai yang sudah diisi. Orang mungkin melangkau medan itu, kemudian terkejut apabila menerima ralat medan wajib.
Tidak Konsisten untuk Pembaca Skrin
Sokongan pembaca skrin untuk ruang letak sebagai nama tidak konsisten dan berbeza mengikut pelayar. Anda tidak boleh bergantung padanya untuk dibacakan.
Gunakan Kedua-duanya
Ruang letak sesuai digunakan sebagai petunjuk tambahan, seperti contoh format. Padankan dengan label sebenar dan jangan gunakannya bersendirian.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Contoh Format Sangat Sesuai Di Sini
Ruang letak sangat sesuai untuk contoh format, seperti corak tarikh. Label masih memberikan nama sebenar medan tersebut.
Label Terapung
Label terapung bergerak ke atas apabila anda menaip, sambil mengekalkan nama itu supaya sentiasa kelihatan. Ia ialah label sebenar yang hanya dianimasikan, jadi ia mematuhi keperluan.
Uji dengan Mengisinya
Pemeriksaan pantas: taip sesuatu dalam medan itu. Jika anda tidak lagi dapat mengetahui perkara yang dikehendakinya, ruang letak tersebut telah mengambil alih tugas label.
WCAG Menyokong Perkara Ini
Kriteria WCAG Label atau Arahan mengharapkan nama yang jelas dan sentiasa kelihatan. Medan yang hanya menggunakan ruang letak sering gagal dalam audit.
Pemeriksaan Pantas
Mengapakah ruang letak merupakan pengganti yang kurang baik untuk label?
Ringkasan
Ruang letak ialah petunjuk yang beransur hilang, bukan nama. Kekalkan label sebenar dan gunakan ruang letak hanya untuk bantuan format tambahan. 💡
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Placeholder Bukan Label” percuma?
Ya — teks penuh “Placeholder Bukan Label” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Web Accessibility Academy, tingkat taraf kepada CoddyKit PRO. Kursus Web Accessibility Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Placeholder Bukan Label”?
Mengapa petunjuk yang hilang menyusahkan pengguna sebenar. Anda berlatih Web Accessibility Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Web Accessibility Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Web Accessibility Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Placeholder Bukan Label” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Setiap Input Memerlukan label Sebenar
- Placeholder Bukan Label
- Kumpulkan Medan dengan fieldset dan legend
- Teks Bantuan dan Medan Wajib yang Diumumkan