Intinya...

Tidak boleh terjadi perubahan tak terduga (seperti pengiriman otomatis, pemuatan ulang halaman, atau membuka halaman baru) ketika nilai input berubah, kecuali:

  • pengguna memberikan konfirmasi, atau
  • pengguna telah diberi tahu sebelumnya.

Apa itu WCAG 3.2.2?

Saat pengguna menggunakan formulir atau elemen input di halaman web, berinteraksi dengan elemen-elemen tersebut tidak boleh menyebabkan perubahan tak terduga terhadap apa yang terjadi di halaman. Ini bisa berarti pengguna mengetik ke dalam kolom, memilih opsi dari checkbox atau radio button, atau mengatur pengaturan di halaman.

Perubahan konteks bisa mencakup perubahan besar seperti:

  • Memindahkan pengguna ke tab baru di browser
  • Menggulirkan pengguna ke bagian yang berbeda di halaman
  • Mengubah fokus ke elemen yang berbeda di halaman
  • Menukar konten sehingga makna halaman berubah

Sebagai contoh, bayangkan pengguna memasukkan nomor telepon mereka ke dalam kolom, dan begitu nomor tersebut selesai diketik, fokus otomatis berpindah ke kolom berikutnya di formulir. Jika tidak ada pemberitahuan sebelumnya bahwa ini akan terjadi, perubahan mendadak ini bisa menyebabkan kebingungannya, terutama jika mereka perlu memperbaiki nomor telepon mereka dan mencoba menekan backspace.

Tujuan dari pedoman ini adalah untuk memastikan bahwa memasukkan input, seperti mengetik ke dalam kolom atau membuat pilihan, dapat diprediksi dan tidak membingungkan pengguna.

Ilustrasi pengguna menekan tombol backspace

Pengguna yang memasukkan nomor telepon mereka ke dalam kolom dan secara otomatis mengalihkan fokus ke kolom berikutnya dalam formulir di mana mereka mencoba menekan tombol backspace.

Mengapa ini penting?

Perubahan yang tidak terduga saat menggunakan kolom formulir atau mengubah pengaturan dapat sangat membuat frustrasi dan bahkan bisa membuat elemen-elemen halaman menjadi tidak dapat digunakan. Hal ini, pada gilirannya, bisa menyulitkan tugas dasar seperti mengirimkan formulir atau memperbarui halaman profil.

Perubahan konteks setelah memasukkan data bisa sangat membingungkan bagi mereka yang memiliki gangguan penglihatan, karena mereka tidak dapat melihat perubahan mendadak di halaman. Tanpa peringatan bahwa sesuatu akan terjadi, pengguna bisa merasa kehilangan arah ketika mereka tiba-tiba berada di halaman baru atau bagian formulir yang berbeda. Pada titik ini, sulit untuk mengetahui apakah mereka dapat kembali ke tempat semula atau jika mereka akan memutuskan untuk meninggalkan situs sepenuhnya.

Perubahan konteks yang mengganggu dapat membingungkan, dan sulit untuk memahami apa yang menyebabkan pergeseran tersebut dan bagaimana cara membatalkannya. Bagi mereka yang memiliki gangguan kognitif, perubahan visual dan konteks ini bisa sulit untuk diinterpretasikan, yang dapat menyebabkan kecemasan.

Siapa yang terpengaruh?

Pengguna dengan gangguan kognitif, pengguna low vision atau memiliki penglihatan terbatas, dan pengguna netra

Pengguna dengan gangguan kognitif mungkin merasa kesulitan untuk memproses perubahan konteks yang tidak terduga, atau bahkan mungkin tidak menyadari bahwa konteks telah berubah sama sekali.

Pengguna dengan penglihatan terbatas atau netra umumnya mengandalkan teknologi bantu untuk menavigasi konten, dan saat mereka memasukkan data, mereka bisa merasa bingung dan frustrasi jika konteks berubah tanpa peringatan.

Cara menerapkan WCAG 3.2.2

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

Gunakan tombol untuk perubahan konteks atau melakukan aksi

Pastikan pengguna dapat memilih kapan perubahan terjadi dengan mengklik tombol atau tautan karena elemen-elemen ini diharapkan untuk mengaktifkan suatu tindakan. Dengan cara ini, tidak ada yang terjadi sampai pengguna siap, bukan aksi yang terjadi sebagai efek samping dari berinteraksi dengan formulir atau kolom input.

Misalnya, bayangkan sebuah menu dropdown di mana kamu memilih opsi, tetapi tidak ada yang terjadi sampai kamu menekan tombol "Go". Dengan cara ini, jika kamu tidak sengaja scrolling melalui opsi, tidak ada yang akan terjadi hingga kamu mengonfirmasi dengan mengklik tombol.

Contoh menu dropdown

Dropdown dengan label 'Choose Your Order Type' yang berisi opsi seperti 'Carry Out', 'Delivery', 'Dine-In' dan sebuah tombol yang terletak di sampingnya yang bertuliskan 'Start Order'

Tombol kirim untuk formulir

Tombol diharapkan untuk mengaktifkan aksi. Dengan begitu, formulir harus selalu memiliki tombol kirim. Menggunakan tombol yang jelas membantu pengguna mengetahui bagaimana cara mengirimkan informasi mereka tanpa kebingungan.

Misalnya, ketika kamu mengisi formulir pemesanan online, ada tombol besar "Submit" di bagian bawah formulir. Jelas bahwa menekan tombol itu akan mengirimkan pesanan kamu, alih-alih pengiriman pesanan dilakukan setelah kolom informasi kartu kredit terisi.

Perbandingan dua formulir

Formulir tanpa tombol kirim dibandingkan dengan formulir yang memiliki tombol kirim. Formulir tanpa tombol kirim menunjukkan simbol tanda tanya di sekitarnya.

Beritahukan sebelum elemen mengubah konteks

Berikan pemberitahuan kepada pengguna tentang apa yang akan terjadi sebelumnya untuk setiap input yang akan mengubah konteks halaman. Karena mengubah pengaturan formulir atau memasukkan informasi ke dalam kolom biasanya tidak mengubah konteks, sangat penting untuk memberi pengguna pemberitahuan jika itu akan terjadi.

Idealnya, instruksi ini harus terkait langsung dengan kontrol formulir itu sendiri agar pengguna melihatnya tepat saat mereka membutuhkannya.

Misalnya, dalam survei bertahap di mana setiap jawaban mengarah ke pertanyaan berikutnya, instruksi di awal harus menjelaskan bahwa mengklik jawaban akan membawa mereka ke halaman berikutnya dalam formulir.

Contoh sebuah formulir dengan instruksi jelas

Halaman 3 dari formulir survei dengan instruksi yang jelas memberitahu pengguna bahwa mereka akan diarahkan ke halaman berikutnya setelah membuat pilihan dan menekan tombol Enter.

Kesimpulan

WCAG 3.2.2 berfokus untuk memastikan penggunaan formulir atau kolom input berjalan lancar dan tanpa kejutan. Dengan memberikan kontrol kepada pengguna tentang kapan perubahan terjadi dan memberi pemberitahuan saat sesuatu akan mengubah halaman, kamu membuat situs webmu lebih mudah diakses oleh semua orang.