Intinya...
Pembaruan status seperti “formulir gagal dikirim” atau “5 barang di keranjang” harus:
- ditulis dengan semantik yang tepat (misalnya
role="status"
ataurole="alert"
), - dapat dideteksi oleh teknologi bantu, dan
- tidak memerlukan perpindahan fokus.
Apa itu WCAG 4.1.3?
Elemen kustom harus memberi tahu pesan status mereka (seperti konfirmasi keberhasilan, pembaruan progres, dan pesan kesalahan) kepada pengguna dengan teknologi bantu. Ini harus dilakukan tanpa memerlukan perubahan fokus atau interaksi dengan halaman.
Pesan status adalah pemberitahuan yang memberikan informasi penting kepada pengguna tanpa mengubah fokus. Ini mencakup pesan seperti:
- Pesan keberhasilan, “Formulir berhasil dikirim”
- Pesan kesalahan, “Alamat email tidak valid”
- Pembaruan progres, “Mengunggah, 50% selesai”
- Pemberitahuan tentang status aplikasi, “Keranjang belanja diperbarui: 3 item”
Berbeda dengan pop-up yang memaksa pengguna untuk berinteraksi sebelum melanjutkan, pesan status harus diumumkan dengan lancar tanpa mengubah posisi pengguna di halaman. Teknologi bantu harus dapat mendeteksi dan membacanya tanpa memerlukan tindakan tambahan dari pengguna.
Mengapa ini penting?
Teknologi bantu mungkin tidak akan memperhatikan atau menyadari pesan status atau pemberitahuan kecuali mereka diprogram dengan benar ke dalam elemen kustom. Jika pesan status tidak disampaikan secara programatis, pengguna mungkin tidak akan tahu kapan tindakan selesai, kapan terjadi kesalahan, atau bagaimana mereka sedang maju melalui sebuah proses.
Contohnya, jika formulir menampilkan pesan kesalahan tetapi pesan tersebut tidak diumumkan kepada pengguna screen reader, mereka mungkin tidak akan tahu mengapa formulir tidak dapat dikirim, yang akan membuat mereka merasa frustrasi dan terjebak.
Siapa yang terpengaruh?
Pengguna low vision atau memiliki penglihatan terbatas, dan pengguna netra.
Pengguna netra atau memiliki penglihatan terbatas bergantung pada teknologi bantu seperti screen reader untuk berinteraksi dengan web. Ketika elemen kustom tidak mendukung pesan status, pengguna ini dapat melewatkan pengumuman penting tentang keberhasilan, kesalahan, dan pembaruan progres.
Cara menerapkan WCAG 4.1.3?
Berikan role ARIA untuk pesan status
Karena screen reader tidak secara otomatis mendeteksi perubahan dalam konten, kita perlu menggunakan ARIA untuk memastikan pesan status dikenali dan dibacakan. Atribut role
ARIA membantu dengan memberi tahu teknologi bantu jenis pesan apa itu (keberhasilan, kesalahan, progres, dll.). Menggunakan value atribut role
yang benar untuk setiap jenis pesan status memastikan bahwa pembaruan disampaikan dengan benar tanpa mengganggu pengalaman pengguna.
Berikut adalah beberapa peran umum dan kasus penggunaannya:
role=”status”
untuk pesan sukses
Gunakan role="status"
untuk pembaruan umum yang memberi tahu pengguna tanpa mengganggu mereka. Valuearia-live=polite
, dan valuearia-atomic=true
, sehingga pesan ini secara otomatis akan dibacakan sepenuhnya tanpa perlu menambahkan atribut ARIA tambahan.
Atribut role
ini harus digunakan ketika pengiriman yang berhasil telah diselesaikan. Pastikan pesan keberhasilan menjelaskan dengan jelas apa yang telah terjadi.
<div role="status">Congrats! Your form has been successfully submitted.</div>
role="alert"
untuk pesan peringatan dan kesalahan
Gunakan role="alert"
untuk peringatan penting atau kesalahan yang membutuhkan perhatian segera. Atribut role
ini memastikan pengguna diberitahu segera ketika terjadi masalah, agar mereka tidak melewatkan masalah penting seperti kolom yang wajib diisi atau format yang salah. Ini mencakup hal-hal seperti:
- Menandai kolom input yang wajib diisi namun belum diisi
- Memberi tahu pengguna saat mereka memasukkan value yang tidak diperbolehkan atau menggunakan format yang salah
- Memberikan teks koreksi untuk input atau pemeriksaan ejaan
<div role="alert">Error: Password must be at least 8 characters.</div>
role="progressbar"
untuk pesan proses berkelanjutan
Gunakan atribut role
ini untuk menunjukkan proses yang sedang berlangsung, seperti indikator pemuatan atau progres instalasi. Atribut role
ini juga memiliki value implisit aria-live="polite"
dan valuearia-atomic="false"
, jadi pesan hanya akan diumumkan saat pengguna dalam keadaan diam dan hanya membagikan teks yang berubah.
Misalnya, jika sebuah file sedang diunggah, progress bar mungkin menampilkan "Uploadin 50%" dan terus memperbarui saat proses pengunggahan berlanjut. Ini membantu pengguna screen reader memahami sejauh mana proses tersebut.
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50% complete</div>
role="log"
untuk pesan progres berurut
Gunakan role
ini untuk pembaruan yang berurutan, seperti pesan chat atau acara real-time. Sama seperti role="progressbar"
, peran ini juga memiliki value implisit aria-live="polite"
dan valuearia-atomic="false"
, sehingga pesan akan diumumkan ketika pengguna sedang tidak aktif dan hanya membagikan teks yang berubah dalam elemen tersebut.
<div role="log" aria-live="polite">New message received.</div>
Gunakan ARIA untuk pengumuman
Gunakan atribut aria-live
dan aria-atomic
ketika pesan status diperbarui agar teknologi bantu dapat mengenali dan mengumumkan perubahan tersebut:
aria-live="polite"
untuk pembaruan yang tidak mendesak yang harus dibaca ketika pengguna sedang tidak aktif.aria-live="assertive"
untuk pesan kritis yang harus segera diumumkan.aria-atomic="true"
untuk memastikan seluruh pesan dibaca, bukan hanya bagian yang diperbarui.
<div aria-live="polite" aria-atomic="true">Your file has been uploaded.</div>
Beberapa role
ARIA sudah memiliki pengaturan default untuk bagaimana pembaruan diumumkan, tetapi pengaturan default ini mungkin tidak bekerja di semua browser atau perangkat. Untuk memastikan konsistensi, sebaiknya kamu secara eksplisit mengatur atribut-atribut ini di kodemu.
Tunjukan cara menangani kesalahan pada formulir
Untuk kesalahan validasi, berikan pesan yang jelas dan dapat diakses secara programatik dengan menggunakan role="alert"
untuk pemberitahuan kesalahan yang langsung. Pastikan pesan kesalahan untuk setiap kolom terkait dengan menggunakan aria-describedby
sesuai dengan standar WCAG 3.3.1 Identifikasi Kesalahan.
Contoh kode berikut menunjukkan cara menangani kesalahan pada kolom formulir:
<input type="email" id="email" aria-describedby="emailError">
<div id="emailError" role="alert"><strong>Error: Please enter a valid email address.</strong></div>
Tanpa role="alert"
atau aria-describedby
, pengguna yang mengisi formulir mungkin mengirimkannya tanpa tahu bahwa ada kesalahan yang terjadi. Mereka akan bingung mengapa tidak ada yang terjadi setelah pengiriman.
Gunakan atribut aria-errormessage
Atribut aria-errormessage
adalah penambahan baru pada ARIA dan dimaksudkan untuk menggantikan aria-describedby
untuk pesan kesalahan. Namun, dukungan browser untuk aria-errormessage
masih terbatas, jadi aria-describedby
tetap menjadi pendekatan yang disarankan untuk saat ini.
Kesimpulan
Pesan status yang dikodekan dengan benar memastikan pengguna tetap mendapatkan informasi tentang perubahan tanpa gangguan yang tidak perlu. Menggunakan role
ARIA dan atribut membantu membuat interaksi web lebih dapat diakses oleh semua pengguna, meningkatkan kegunaan, dan membuat situs web lebih mudah digunakan oleh pengguna yang bergantung pada screen reader dan teknologi bantu lainnya.