Intinya...

Kesalahan dan validasi harus diidentifikasi dan dijelaskan dengan jelas dalam bentuk teks, tidak hanya secara visual (seperti icon atau warna border).

Apa itu WCAG 3.3.1?

Jika seorang pengguna melakukan kesalahan saat mengisi formulir web, semua kesalahan yang mereka buat harus dapat dikenali dengan jelas. Pesan kesalahan harus menunjukkan dengan tepat apa yang salah dan bagaimana cara memperbaikinya.

Identifikasi kesalahan berlaku baik untuk kolom wajib yang dibiarkan kosong maupun untuk data tidak valid. Formulir perlu mengkomunikasikan kolom mana yang memiliki kesalahan dan menjelaskan apa yang salah dalam bentuk teks tertulis. Ini membantu pengguna menemukan dan memperbaiki kesalahan mereka.

Tujuan dari kriteria ini adalah membantu pengguna dengan mudah mengenali kesalahan dalam input mereka dan memahami bagaimana cara memperbaikinya.

Contoh pesan kesalahan di kolom input nama dan email

Sebuah formulir di mana kolom wajib yang terlewat dan kolom email memiliki identifikasi kesalahan yang benar. Untuk kolom yang terlewat, pesan kesalahannya berbunyi, 'Error: Name field is required, please enter your name.' Dan untuk kolom email, pesan kesalahannya berbunyi, 'Error: Email field must include a valid domain, please try again.'

Mengapa ini penting?

Jika identifikasi kesalahan pada kolom formulir tidak ditangani dengan baik, pengguna bisa merasa frustrasi dan mungkin meninggalkan formulir atau situs web tersebut. Pengguna screen reader mungkin tidak menyadari adanya kesalahan, pengguna dengan defisiensi penglihatan warna bisa melewatkan isyarat kesalahan berbasis warna, dan pengguna dengan disabilitas kognitif dapat mengalami kesulitan memahami apa yang salah.

Penanganan kesalahan yang buruk juga bisa menyebabkan data yang tidak benar dikirimkan oleh pengguna, atau pengguna terus-menerus melakukan kesalahan yang sama, yang membuat proses perbaikan menjadi lebih melelahkan.

Penanganan kesalahan yang tidak tepat mencakup:

  • Menggunakan hanya simbol atau warna untuk menunjukkan kesalahan
  • Tidak menunjukkan kolom mana yang memiliki kesalahan
  • Tidak menunjukkan bahwa ada kesalahan pada formulir yang mencegah pengiriman
  • Tidak secara jelas menunjukkan dengan teks kolom mana yang wajib diisi untuk pengiriman
  • Tidak adanya aturan validasi input yang ditulis dengan jelas (misalnya, “Error: kolom kode pos harus berisi 5 digit angka saja”)

Contoh penerapan yang salah untuk pesan kesalahan

Sebuah gabungan dari semua cara yang salah dalam menangani kesalahan, termasuk hanya menggunakan simbol untuk menunjukkan kesalahan, menggunakan pesan kesalahan yang tidak jelas, tidak adanya aturan validasi, dan tidak menandai kolom yang wajib diisi.

Siapa yang terpengaruh?

Pengguna dengan penglihatan terbatas, pengguna netra, dan pengguna dengan disabilitas kognitif.

Pengguna dengan penglihatan terbatas, seperti defisiensi penglihatan warna, mungkin kesulitan menangkap petunjuk warna yang digunakan dalam penanganan kesalahan. Pesan kesalahan yang hanya mengandalkan warna untuk menunjukkan masalah bisa membuat pengguna dengan defisiensi penglihatan warna kesulitan mengenalinya.

Pengguna yang menggunakan screen reader untuk mengakses halaman web mungkin tidak dapat menemukan kesalahan dan memahami sumbernya tanpa pesan kesalahan yang jelas dan informasi tentang kolom mana yang bermasalah.

Pengguna dengan disabilitas kognitif memerlukan instruksi yang jelas pada pesan kesalahan dan bagaimana cara memperbaiki masalah tersebut. Jika tidak, mereka bisa terjebak mencoba memahami kesalahan dalam formulir mereka.

Cara menerapkan WCAG 3.3.1

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

Penanganan kesalahan tekstual

Pengguna harus diberi tahu tentang masalah apa pun dalam formulir, dan pesan kesalahan perlu mengidentifikasi kolom mana yang bermasalah menggunakan teks tertulis yang jelas sambil mempertahankan data yang sudah diisi.

Selain itu, menambahkan notifikasi kesalahan di dekat judul halaman membantu pengguna screen reader mengetahui bahwa ada masalah sebelum mereka mencoba menavigasi ke halaman lain. Ini juga dapat membantu jika sebuah skrip memposisikan keyboard untuk fokus pada kolom pertama di mana kesalahan terjadi.

Kesalahan tekstual dapat ditampilkan dalam berbagai cara setelah pengguna mencoba mengirimkan formulir atau melanjutkan ke halaman berikutnya dalam formulir, termasuk:

  • Menampilkan kotak peringatan (alert box)
  • Menampilkan pesan kesalahan di dekat kolom yang bermasalah
  • Atau membuat daftar semua kolom yang bermasalah secara bersamaan

Tidak mengisi kolom wajib

Pengguna harus diberi tahu jika ada kolom wajib atau kolom yang harus diisi yang terlewat dalam formulir, dan pesan kesalahan harus mengidentifikasi kolom mana yang terlewat menggunakan teks tertulis yang jelas.

Contoh penggunaan modal untuk pesan kesalahan

Penanganan kesalahan untuk kolom wajib yang terlewat melalui sebuah modal yang bertuliskan, 'Error in form submission, please fill out the required Email Address field.'

Input tidak valid

Pengguna harus diberi tahu tentang instruksi apa pun untuk memperbaiki input yang tidak valid, dan informasi tersebut harus mudah dipahami. Berikut beberapa contoh pesan kesalahan yang membantu terkait input tidak valid:

  • Jika input harus sesuai dengan sekumpulan nilai yang diizinkan, pesan kesalahan harus mencantumkan pilihan yang diperbolehkan
  • Menjelaskan seperti apa data dan format yang benar
  • Menampilkan contoh nilai yang benar dan menjelaskan cara memasukkannya

Beberapa kolom umum yang menggunakan validasi input adalah kolom tanggal, alamat email, nomor telepon, atau alamat.

Contoh penerapan instruksi untuk memperbaiki kesalahan

Penanganan kesalahan untuk kolom kode pos yang tidak valid, sebuah deskripsi muncul di dekat kolom tersebut yang berbunyi, 'Error in the zip code field, value must contain a valid 5-digit USA zip code.'

Bantu pengguna menemukan kesalahan

Untuk membantu pengguna menemukan dan memperbaiki kesalahan input dengan cepat, pesan kesalahan juga bisa menyertakan tautan langsung ke kolom yang bermasalah. Dengan begitu, pengguna tidak perlu mencari-cari kesalahan atau kolom tersebut, melainkan bisa langsung melompat ke kolom yang perlu diperbaiki.

Feedback yang jelas untuk pengiriman yang berhasil

Terakhir, memberikan feedback yang jelas untuk pengiriman formulir yang berhasil membantu pengguna memastikan bahwa mereka tidak perlu mencari-cari kesalahan di dalam formulir atau halaman. Dengan menampilkan umpan balik yang jelas dan konsisten, pengguna dapat dengan cepat memahami bahwa tindakan mereka telah selesai, sehingga menghemat waktu dan usaha untuk memeriksa secara manual.

ARIA untuk memberi highlight dan notifikasi

Atribut aria-invalid

Meskipun idealnya pesan kesalahan ditautkan langsung ke kolom, terkadang keterbatasan desain atau teknis membuat hal ini sulit dilakukan. Mengatur atribut aria-invalid ke value "true" untuk kolom yang tidak valid membantu teknologi bantu memberi tahu pengguna tentang kesalahan dan mengarahkan mereka ke kolom yang memerlukan perhatian.

Atribut ini hanya boleh diatur ke "true" setelah pemeriksaan validasi. Jika atribut diatur ke "false" atau tidak dibreikan, teknologi bantu tidak akan menunjukkan adanya kesalahan.

Saat menggunakan aria-invalid, pastikan hanya kolom yang memiliki kesalahan yang atributnya diatur ke "true", dan label atau instruksi yang terkait dengan setiap kolom harus dengan jelas menjelaskan kesalahannya.

role = "alertdialog"

Selain itu, menggunakan role="alertdialog" menciptakan notifikasi untuk pengguna saat terjadi kesalahan input. Dialog peringatan ini harus ditambahkan secara dinamis ke dalam DOM saat dibutuhkan, bukan dimasukkan ke dalam HTML statis. Dialog modal ini harus memiliki:

Nama yang dapat diakses dengan aria-label atau aria-labelledby.

  • Deskripsi menggunakan aria-describedby.
  • Setidaknya satu kontrol yang dapat difokuskan, dengan fokus berpindah ke kontrol tersebut saat dialog dibuka.
  • Urutan tab dibatasi hanya di dalam dialog selama dialog terbuka.
  • Fokus kembali ke posisi asal saat dialog ditutup.

Atribut aria-live

Atribut aria-live memberi tahu teknologi bantu tentang pesan kesalahan baru di sebuah wilayah "live", yang kemudian akan dibacakan secara otomatis tanpa memerlukan fokus pengguna.

Kesimpulan

Mengidentifikasi kesalahan dengan deskripsi teks yang jelas membantu semua pengguna memahami apa yang salah dan bagaimana cara memperbaikinya. Pendekatan ini meminimalkan frustrasi dan memastikan bahwa semua pengguna, terlepas dari kemampuan atau perangkat yang digunakan, dapat menyelesaikan formulir dengan sukses. Memberikan feedback yang jelas untuk kesalahan maupun pengiriman yang berhasil membuat situs web menjadi lebih inklusif, membantu pengguna dengan cepat menyelesaikan masalah, dan memastikan tindakan mereka tanpa kerepotan yang tidak perlu.