Mengapa Wilayah Langsung Gagal dan Cara Memperbaikinya

Wilayah live tampak sederhana, tetapi sering gagal. Mengetahui kendala umum menghemat waktu berjam-jam untuk pengujian yang membingungkan dengan pembaca layar sungguhan. 🐛

Jika Anda membuat wilayah dan teksnya pada saat yang sama, banyak pembaca layar akan melewatkannya. Wilayah harus sudah ada dalam keadaan kosong sebelum perubahan terjadi.

Tambahkan container live saat halaman dimuat tanpa teks, lalu perbarui isinya nanti. Pada saat itu pembaca layar sudah memantaunya.

Menulis string yang sama dua kali sering menghasilkan keheningan, karena pembaca tidak melihat perubahan. Jumlah dan status yang berulang sering mengalami masalah ini.

Kosongkan wilayah, lalu tetapkan teks baru pada tick berikutnya. Pengaturan ulang singkat ini membuat pembaca memperlakukannya sebagai pengumuman baru.

Memperbarui wilayah dengan blok teks yang sangat besar membanjiri pengguna. Wilayah live ditujukan untuk pembaruan singkat, bukan seluruh konten halaman.

Atur aria-atomic ke true agar pembaca mengucapkan seluruh wilayah setiap kali ada perubahan, bukan hanya bagian yang diperbarui. Ini berguna untuk pesan gabungan.

Atribut aria-relevant mengatur jenis perubahan yang diumumkan, seperti penambahan atau penghapusan. Default penambahan plus teks cocok untuk sebagian besar kasus.

Wilayah yang disembunyikan dengan display none dihapus dari pohon aksesibilitas dan tetap diam. Ini adalah salah satu kesalahan yang paling umum.

Inspektur peramban tidak dapat membuktikan bahwa sebuah wilayah berfungsi. Selalu verifikasi dengan pembaca layar sungguhan seperti NVDA atau VoiceOver sebelum merilisnya.

Wilayah live yang sama dapat terdengar berbeda pada berbagai pembaca layar dan peramban. Uji beberapa kombinasi, bukan hanya mengandalkan satu kombinasi.

Sekarang Anda dapat men-debug wilayah live: render dalam keadaan kosong terlebih dahulu, kosongkan lalu tetapkan untuk pengulangan, hindari display none, dan selalu uji dengan pembaca sungguhan. ✅