3.3.3 Saran Koreksi Kesalahan

Apa itu WCAG 3.3.3?

Ketika pengguna membuat kesalahan dalam formulir, hanya memberi tahu mereka bahwa ada yang salah tidak cukup, kamu perlu membimbing mereka untuk memperbaikinya. Pesan kesalahan harus mencakup saran yang membantu untuk memperbaiki masalah tersebut.

Ini berlaku baik untuk kolom yang wajib diisi yang terlewatkan maupun input yang tidak valid. Alih-alih menampilkan pesan yang samar seperti "Kesalahan: Kolom ini salah," pesan tersebut harus menjelaskan mengapa input tersebut salah dan bagaimana cara memperbaikinya.

Tujuan dari kriteria keberhasilan ini adalah untuk mencegah pengguna merasa terjebak ketika mereka menemui kesalahan. Pengguna harus selalu tahu langkah apa yang perlu diambil untuk menyelesaikan masalah tersebut. Namun, penting untuk dicatat bahwa kriteria ini hanya membutuhkan saran untuk memperbaiki kesalahan—tidak mencakup identifikasi kesalahan. Tanggung jawab untuk itu ada pada WCAG 3.3.1 Identifikasi Kesalahan.

Mengacu pada gambar di atas:

• Pada contoh pertama, pesan kesalahan hanya mengatakan "Invalid". Ini terlalu samar dan tidak membantu pengguna untuk memahami atau memperbaiki masalahnya.
• Pada contoh kedua, pesan kesalahan memberikan umpan balik yang jelas tentang bagaimana memperbaiki nomor telepon, "Phone number must be in the format (123) 456 - 7890. And, only include numbers."
• Contoh terakhir adalah pilihan terbaik karena mencakup deskripsi kesalahan yang membantu dan menawarkan saran yang berguna yang dapat dipilih pengguna untuk mengisi otomatis. Menu drop-down ditampilkan dengan nomor telepon, mungkin nomor yang sebelumnya telah dimasukkan.

Mengapa ini penting?

Tanpa saran kesalahan yang membantu, pengguna bisa merasa frustrasi dan meninggalkan formulir. Pengguna dengan disabilitas kognitif mungkin kesulitan untuk mengetahui apa yang salah, sementara pengguna screen reader mungkin mengalami kesulitan memahami cara memperbaiki kesalahan. Pengguna dengan gangguan mobilitas juga mungkin merasa kesulitan untuk bernavigasi bolak-balik untuk memperbaiki kesalahan.

Penanganan kesalahan yang buruk dapat menyebabkan:

• Pengguna berulang kali membuat kesalahan yang sama
• Data yang salah dikirimkan
• Pengguna meninggalkan formulir karena kebingungan atau frustrasi

Misalnya, pesan kesalahan yang mengatakan "Kesalahan: Input tidak valid" membuat pengguna bertanya-tanya: Apa yang tidak valid? Bagaimana cara memperbaikinya? Format apa yang diperlukan? Pesan kesalahan yang tidak jelas bisa membuat pengisian formulir menjadi sulit atau bahkan tidak mungkin.

Siapa yang terpengaruh?

Pengguna low vision atau netra, pengguna dengan gangguan mobilitas, dan pengguna dengan disabilitas kognitif.

Pengguna dengan disabilitas kognitif mungkin kesulitan memahami pesan kesalahan yang umum dan membutuhkan petunjuk yang jelas untuk memperbaiki input mereka.

Pengguna low vision atau netra yang mengandalkan screen reader membutuhkan deskripsi kesalahan yang eksplisit dan saran untuk memperbaikinya.

Pengguna dengan gangguan mobilitas mungkin merasa kesulitan untuk bernavigasi bolak-balik melalui formulir. Pesan kesalahan yang jelas dan dapat ditindaklanjuti membantu mereka memperbaiki kesalahan dengan langkah yang lebih sedikit.

Cara menerapkan WCAG 3.3.3

Berikan saran yang membantu

Pesan kesalahan harus menjelaskan masalah dan menyarankan input yang benar jika memungkinkan. Ini bisa mencakup secara otomatis menyarankan perbaikan ejaan dan mempersempit opsi berdasarkan input pengguna sebelumnya.

Misalnya, jika pengguna memasukkan kode pos mereka saat memesan makanan secara online, sistem harus menyarankan lokasi restoran terdekat untuk pesanan mereka.

Atau, jika pengguna salah mengeja nama kota mereka, seperti “Chicargoo,” kolom input dapat menyarankan “Chicago” sebagai gantinya.

Dalam gambar di atas:

• Salah satu contoh menawarkan perbaikan ejaan ketika pengguna tidak sengaja memasukkan “Chicargoo,” alih-alih “Chicago.”
• Contoh kedua menggunakan input Kode Pos yang telah dimasukkan sebelumnya untuk memberikan saran cerdas dalam memilih Kota. Alih-alih meminta pengguna memasukkan nama Kota, formulir secara otomatis menyarankan serangkaian opsi yang lebih sempit.

Berikan deskripsi kesalahan yang jelas

Pengguna perlu memahami mengapa input mereka salah dan bagaimana cara memperbaikinya. Berikut beberapa contoh pesan kesalahan yang membantu terkait input yang tidak valid:

• Jika input harus sesuai dengan nilai yang diizinkan, pesan kesalahan harus mencantumkan opsi-opsi tersebut untuk membantu pengguna memasukkan informasi yang benar.
• Jika format tertentu diperlukan, berikan contoh format yang benar.
• Sarankan alternatif atau perbaikan jika memungkinkan.

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

Gunakan ARIA untuk membantu memberikan saran atau deskripsi

Untuk pengguna yang mengandalkan teknologi bantu, ARIA dapat membantu menyampaikan kesalahan dengan efektif.

Gunakan role='alertdialog' untuk Memberitahu Pengguna Ketika Terjadi Kesalahan Input Pemberitahuan kesalahan harus memenuhi beberapa persyaratan agar dapat diakses dengan baik:

• Ditambahkan secara dinamis ke dalam DOM saat dibutuhkan (tidak dimasukkan dalam HTML statis).
• Memiliki nama yang dapat diakses menggunakan aria-label atau aria-labelledby.
• Termasuk deskripsi dengan aria-describedby.
• Mengandung setidaknya satu kontrol yang dapat difokuskan (seperti tombol 'Tutup'), dengan fokus keyboard secara otomatis berpindah ke kontrol tersebut saat dialog dibuka.
• Membatasi urutan tab di dalam dialog saat dialog terbuka.
• Mengembalikan fokus ke posisi asli saat dialog ditutup.

Selain itu, pemberitahuan kesalahan harus mencakup saran yang membantu atau deskripsi kesalahan yang jelas sehingga pengguna yang mengandalkan teknologi bantu dapat mengambil langkah selanjutnya untuk memperbaiki input mereka.

Implementasikan navigasi kesalahan

Untuk meningkatkan kegunaan, pesan kesalahan harus mencakup tautan langsung ke kolom yang bermasalah. Ini memungkinkan pengguna untuk dengan cepat menemukan dan memperbaiki kesalahan mereka tanpa harus mencari di seluruh formulir.

Berikan feedback yang jelas untuk pengiriman yang berhasil

Setelah pengguna mengirimkan formulir dengan sukses, mereka harus menerima konfirmasi yang jelas. Ini membantu mereka memahami bahwa tindakan mereka telah selesai dan meyakinkan mereka bahwa tidak ada perbaikan lebih lanjut yang diperlukan.

Kesimpulan

Pesan kesalahan tidak hanya harus menunjukkan kesalahan; mereka harus membantu pengguna memperbaikinya. Memberikan saran yang jelas dan dapat ditindaklanjuti mengurangi frustrasi, membantu pengguna menyelesaikan formulir dengan efisien, dan memastikan pengalaman yang lebih inklusif untuk semua orang.