Mengumumkan Toast, Pemuatan, dan Hitungan
Buat perubahan UI asinkron terdengar.
Mengumumkan Toast, Pemuatan, dan Hitungan adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Antarmuka Asinkron Memerlukan Suara
Notifikasi pop-up, indikator pemuatan, dan jumlah hasil semuanya mengubah halaman tanpa memuat ulang. Tanpa wilayah live, pengguna pembaca layar dapat melewatkan semuanya.
Notifikasi Pop-up Harus Diumumkan
Notifikasi pop-up adalah pesan singkat yang muncul sementara. Beri containernya peran status agar pembaca layar mengucapkan teks saat teks tersebut muncul. 🍞
<div role="status">Item added to cart</div>Pertahankan Wilayah Notifikasi Pop-up
Render satu wilayah notifikasi pop-up yang kosong saat pemuatan, lalu sisipkan pesan ke dalamnya. Membuat wilayah baru setiap kali sering kali gagal menghasilkan pengumuman.
<div id="toasts" role="status"></div>Indikator Pemuatan Memberi Tahu Pengguna untuk Menunggu
Saat data sedang dimuat, umumkan hal tersebut. Pesan status yang sopan seperti Loading results membuat pengguna tetap mendapat informasi, bukan menebak-nebak. ⏳
out.textContent = 'Loading results';Lalu Umumkan Penyelesaiannya
Saat pemuatan selesai, perbarui wilayah yang sama dengan hasilnya. Memasangkan pesan awal dan akhir memberikan gambaran kemajuan yang jelas.
out.textContent = 'Results loaded';Umumkan Jumlah Hasil
Setelah pencarian atau penyaringan, ucapkan berapa banyak item yang cocok. Pesan jumlah yang singkat membantu pengguna yang tidak dapat memindai halaman secara visual.
out.textContent = '12 results found';Jumlah Lebih Baik daripada Keheningan
Memperbarui daftar hasil tanpa jumlah membuat pengguna pembaca layar tidak yakin apakah sesuatu telah berubah. Satu angka yang diucapkan dapat mengatasinya.
Buat Pesan Tetap Singkat
Pengumuman live menyela alur bacaan, jadi buat setiap pesan tetap ringkas. Saved lebih baik daripada Your changes were successfully saved just now.
Buat Setiap Pembaruan Berbeda
Jika teks baru identik dengan teks lama, beberapa pembaca layar tetap diam. Ubah susunan katanya atau kosongkan wilayah terlebih dahulu untuk memaksa pembacaan ulang.
Jangan Sembunyikan dengan display none
Wilayah live yang disetel ke display none tidak akan mengumumkan apa pun. Untuk menyembunyikannya secara visual, gunakan class yang disembunyikan secara visual tetapi tetap mempertahankannya di pohon aksesibilitas.
Satu Wilayah, Banyak Pesan
Biasanya Anda hanya memerlukan satu wilayah sopan untuk notifikasi pop-up dan jumlah di seluruh aplikasi. Arahkan pembaruan melalui wilayah tersebut, bukan menyebarkan banyak elemen live.
Pemeriksaan Singkat
Wilayah notifikasi pop-up Anda tidak pernah mengumumkan apa pun. CSS menyembunyikannya dengan display none. Apa kemungkinan perbaikannya?
Rangkuman: Mengumumkan Antarmuka Asinkron
Anda mempelajari cara menyuarakan notifikasi pop-up, indikator pemuatan, dan jumlah melalui wilayah sopan yang tetap ada, dengan pesan singkat dan tanpa pernah menggunakan display none. ✅
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengumumkan Toast, Pemuatan, dan Hitungan” gratis?
Ya — teks lengkap “Mengumumkan Toast, Pemuatan, dan Hitungan” 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 “Mengumumkan Toast, Pemuatan, dan Hitungan”?
Buat perubahan UI asinkron terdengar. 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 3 dari 4.
Berapa lama pelajaran “Mengumumkan Toast, Pemuatan, dan Hitungan” 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
- polite vs assertive: Memilih Tingkat Urgensi
- Peran status, alert, dan log
- Mengumumkan Toast, Pemuatan, dan Hitungan
- Mengapa Wilayah Langsung Gagal dan Cara Memperbaikinya