Intinya...

Pembaruan status seperti “formulir gagal dikirim” atau “5 barang di keranjang” harus:

  • ditulis dengan semantik yang tepat (misalnya role="status" atau role="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?

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

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>

Formulir pengiriman email dengan pesan sukses

Formulir pengiriman email dengan pesan status 'Thanks for submitting' ditampilkan dan juga dibacakan oleh screen reader.

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>

Formulir pengiriman email yang error

Formulir pengiriman email di mana pesan status mengatakan 'Error: Invalid email format.' yang ditampilkan dan juga dibacakan oleh screen reader.

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>

Formulir upload PDF yang sedang berlangsung

Pada formulir unggah PDF, di mana progres bar menampilkan 'Upload 55% complete'. Dalam kasus ini, karena aria-atomic disetel ke false, hanya bagian dinamis dari konten yang dibaca setelah pengumuman pertama, sehingga kamu akan mendengar suara seperti 'Loading 10% Complete', '55%', '97%'...

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>

Potongan UI di menu

Pada antarmuka area akun, tombol pemberitahuan menampilkan pesan status 'New Chat Message!', dan pesan ini juga dibaca dengan suara oleh screen reader.

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.