Digital Transformation
ARIA Live Region (Wilayah Live ARIA)
TL;DR: ARIA Live Region adalah atribut HTML (
aria-live="polite"atauaria-live="assertive") yang memerintahkan screen reader membacakan perubahan konten secara otomatis, tanpa pengguna perlu memindahkan fokus atau memuat ulang halaman. Atribut ini dipakai untuk pesan validasi form, notifikasi sukses, keranjang belanja, dan status loading.
Apa itu ARIA Live Region?
ARIA Live Region adalah bagian dari spesifikasi WAI-ARIA yang diterbitkan W3C. Atribut ini menandai satu area halaman sebagai wilayah yang isinya bisa berubah kapan saja, sehingga teknologi bantu seperti NVDA, JAWS, VoiceOver, dan TalkBack tahu bahwa perubahan di area tersebut layak diumumkan.
Bayangkan pengguna tunanetra mengisi form dan menekan tombol kirim. Tanpa Live Region, pesan "Email tidak valid" yang muncul di bawah input tidak akan dibacakan, karena fokus screen reader masih berada di tombol. Dengan aria-live="polite" pada container pesan, screen reader mengumumkannya begitu pembacaan berjalan longgar. Prinsip ini melengkapi semantic HTML, yang mengutamakan makna elemen untuk semua pengguna.
Tiga Nilai Utama dan Kapan Memakainya
| Nilai | Perilaku | Kapan Dipakai |
|---|---|---|
off | Tidak diumumkan (default) | Konten yang sudah dibaca lewat fokus |
polite | Diumumkan setelah aktivitas pengguna selesai | Notifikasi sukses, update jumlah keranjang, hasil pencarian |
assertive | Diumumkan langsung dan menyela pembacaan lain | Error fatal, alert keamanan, sesi akan berakhir |
Selain aria-live, tersedia role semantik: role="status" setara polite dan role="alert" setara assertive. Pilih role saat makna elemen sudah jelas, pilih atribut aria-live saat butuh fleksibilitas lebih.
Contoh Penerapan
Pola paling aman adalah menyiapkan container kosong sejak awal render, lalu mengisi teksnya lewat JavaScript. Screen reader hanya mengumumkan perubahan pada node yang sudah ada di DOM saat halaman dimuat.
<div id="form-status" role="status" aria-live="polite"></div>
<script>
document.getElementById('form-status').textContent =
'Pesan berhasil dikirim. Tim kami membalas dalam 1x24 jam.';
</script>
Di React atau Next.js, cukup render container tersebut secara permanen dan ubah state teksnya. Kesalahan yang paling sering terjadi adalah me-mount seluruh elemen aria-live bersamaan dengan pesannya, sehingga browser tidak mendeteksi adanya perubahan dan pesan tidak pernah dibacakan.
Kenapa Penting?
Berdasarkan data Badan Pusat Statistik 2023, terdapat sekitar 22 juta penyandang disabilitas di Indonesia. Mengabaikan aksesibilitas berarti memotong segmen pasar yang besar dan, sejak berlakunya UU Penyandang Disabilitas No. 8 Tahun 2016, juga berpotensi bersinggungan dengan kewajiban regulasi. Standar rujukannya adalah WCAG 2.2, yang menjadi rekomendasi resmi W3C sejak Oktober 2023 dan masih menjadi acuan utama per 2026.
Dari sisi mesin pencari, halaman yang ramah screen reader cenderung lebih semantik, lebih rapi strukturnya, dan lebih mudah diurai oleh AI Search. Ini beririsan dengan praktik web accessibility dan kualitas Core Web Vitals secara keseluruhan.
Pertanyaan Umum
Apa bedanya aria-live polite dan assertive?
Polite menunggu screen reader selesai membaca konteks yang sedang berjalan, assertive langsung menyela. Gunakan assertive hanya untuk error kritis atau peringatan keamanan. Assertive yang berlebihan membuat pengalaman mendengar menjadi kacau.
Kenapa pesan aria-live saya tidak terbaca sama sekali?
Penyebab paling umum adalah container Live Region baru dibuat bersamaan dengan pesannya. Render container kosong lebih dulu, baru isi teksnya. Penyebab kedua: teks diubah terlalu cepat berturut-turut sehingga pengumuman saling menimpa.
Apakah Live Region menggantikan validasi form biasa?
Tidak. Live Region adalah lapisan tambahan untuk pengguna teknologi bantu. Validasi visual berupa warna, ikon, dan teks tetap wajib. Keduanya berjalan paralel, bukan saling menggantikan.
Istilah Terkait