Mengaitkan Kesalahan dengan Kolom melalui aria-describedby
Buat pesan dibacakan bersama inputnya.
Mengaitkan Kesalahan dengan Kolom melalui aria-describedby 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.
Kesalahan yang Mengambang
Pesan kesalahan yang berada di dekat suatu bidang tampak terhubung bagi Anda. Namun, bagi pembaca layar, pesan itu hanyalah teks terpisah yang mungkin tidak pernah didengar pengguna. ⚠️
Perbaikannya Adalah Tautan
Anda perlu menghubungkan pesan tersebut secara resmi dengan input-nya. Atribut yang melakukan hal ini adalah aria-describedby, dan atribut itu berada pada bidang tersebut.
Arahkan ke id
Berikan elemen kesalahan sebuah id, lalu atur aria-describedby pada input ke id yang sama. Kini keduanya resmi terhubung.
<input id="email" aria-describedby="email-err">
<p id="email-err">Enter a valid email.</p>Hal yang Didengar Pengguna
Saat fokus berada pada input, pembaca layar membacakan label, jenisnya, lalu deskripsi. Kesalahan tersebut tidak lagi berdiri sendiri.
Nama Lalu Deskripsi
aria-describedby tidak menggantikan label. Label memberikan nama; describedby menambahkan informasi tambahan yang dibacakan setelahnya.
Beberapa Deskripsi
Anda dapat mencantumkan beberapa id yang dipisahkan oleh spasi. Peramban membacakannya sesuai urutan, sehingga Anda dapat menggabungkan petunjuk dan kesalahan.
<input aria-describedby="hint err">Hanya Saat Berlaku
Tambahkan id kesalahan ke aria-describedby hanya saat kesalahan sedang ditampilkan. Menunjuk ke simpul yang kosong atau tersembunyi dapat membacakan tidak ada apa-apa atau membingungkan pengguna.
Pertahankan Teks yang Nyata
Elemen yang dideskripsikan harus berisi teks nyata yang terlihat. aria-describedby membacakan isi elemen tersebut, sehingga span kosong tidak memberikan deskripsi yang berguna.
Target Tersembunyi Tetap Diam
Jika target memiliki display none, sebagian besar pembaca layar akan melewatinya. Biarkan teks kesalahan dirender dan terlihat agar deskripsi benar-benar dibacakan.
Berfungsi Bersama aria-invalid
Pasangkan describedby dengan aria-invalid pada bidang yang sama. Yang satu menyatakan bahwa terjadi kegagalan; yang lain menjelaskan alasannya. Bersama-sama, keduanya menyampaikan informasi lengkap.
Bukan Hanya untuk Kesalahan
Atribut yang sama juga dapat memuat petunjuk format, seperti aturan kata sandi. Kesalahan adalah salah satu penggunaan umum, bukan satu-satunya.
<input aria-describedby="pw-rule">
<p id="pw-rule">At least 8 characters.</p>Pemeriksaan Singkat
Bagaimana cara membuat pembaca layar membacakan kesalahan bersama bidangnya?
Ringkasan
Hubungkan kesalahan dengan bidang menggunakan aria-describedby yang menunjuk ke id yang nyata dan terlihat. Pembaca layar kemudian membacakan bidang dan kesalahannya secara bersamaan. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengaitkan Kesalahan dengan Kolom melalui aria-describedby” gratis?
Ya — teks lengkap “Mengaitkan Kesalahan dengan Kolom melalui aria-describedby” 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 “Mengaitkan Kesalahan dengan Kolom melalui aria-describedby”?
Buat pesan dibacakan bersama inputnya. 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 “Mengaitkan Kesalahan dengan Kolom melalui aria-describedby” 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
- Mengaitkan Kesalahan dengan Kolom melalui aria-describedby
- Menandai Status Tidak Valid dengan aria-invalid
- Memindahkan Fokus ke Kesalahan Pertama
- Sebaris, Saat Kehilangan Fokus, atau Saat Dikirim: Waktu Itu Penting