Menandai Status Tidak Valid dengan aria-invalid
Beri tahu teknologi asistif kolom mana yang gagal.
Menandai Status Tidak Valid dengan aria-invalid 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.
Warna Merah Saja Tidak Cukup
Batas merah memberi tahu pengguna yang dapat melihat layar bahwa suatu bidang gagal. Pengguna pembaca layar tidak melihat warna, jadi kegagalan tersebut perlu dinyatakan dalam kode. 🚫
Penanda Invalid
Atribut aria-invalid menandai kontrol yang gagal dalam validasi. Atur nilainya menjadi true agar teknologi bantu mengumumkan keadaan kesalahan.
<input aria-invalid="true">Nilai Bawaan Adalah False
Bidang tanpa aria-invalid dianggap valid. Anda hanya menambahkan aria-invalid="true" saat pemeriksaan benar-benar gagal.
Kembalikan Nilainya
Setelah pengguna memperbaiki nilainya, atur aria-invalid menjadi false atau hapus atribut tersebut. Membiarkannya bernilai true akan mengumumkan kesalahan yang sudah tidak ada.
<input aria-invalid="false">Mengatur Waktu Penanda
Terapkan aria-invalid saat Anda benar-benar melakukan validasi, bukan saat halaman dimuat. Menandai bidang kosong sebagai invalid sebelum pengguna mengetik merupakan pengalaman yang tidak ramah.
Pasangkan dengan Pesan
aria-invalid menyatakan bahwa ada yang salah, tetapi tidak menjelaskan apa. Selalu pasangkan dengan aria-describedby agar pengguna juga mendengar alasannya.
Diumumkan Saat Mendapat Fokus
Saat fokus masuk ke bidang invalid, pembaca layar mengucapkan invalid bersama namanya. Pengguna langsung tahu bahwa bidang tersebut harus diperbaiki.
Atur Gaya Keadaannya
Anda dapat menargetkan atribut tersebut dalam CSS untuk menampilkan cincin merah. Dengan demikian, tampilan visual dan semantik Anda tetap sepenuhnya selaras.
input[aria-invalid="true"] {
border-color: crimson;
}Lebih dari True atau False
aria-invalid juga menerima nilai seperti grammar atau spelling. Untuk sebagian besar formulir, true biasa adalah nilai yang tepat.
Jangan Memalsukannya dengan Warna
Jangan pernah hanya mengandalkan class merah untuk menandakan kesalahan. Class tidak terlihat oleh teknologi bantu; aria-invalid-lah yang membawa maknanya.
Satu Bidang Sekaligus
Tandai setiap kontrol yang gagal secara terpisah. Mengatur aria-invalid pada pembungkus atau formulir tidak memberi tahu pengguna input mana yang perlu diperhatikan.
Pemeriksaan Singkat
Apa yang sebenarnya dikomunikasikan oleh aria-invalid="true"?
Ringkasan
Gunakan aria-invalid untuk menandai bidang yang gagal, atur menjadi true saat terjadi kesalahan dan false setelah diperbaiki, lalu pasangkan dengan pesan kesalahan yang dideskripsikan. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menandai Status Tidak Valid dengan aria-invalid” gratis?
Ya — teks lengkap “Menandai Status Tidak Valid dengan aria-invalid” 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 “Menandai Status Tidak Valid dengan aria-invalid”?
Beri tahu teknologi asistif kolom mana yang gagal. 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 “Menandai Status Tidak Valid dengan aria-invalid” 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