2.2.2 Jeda, Hentikan, Sembunyikan

Apa itu WCAG 2.2.2?

WCAG 2.2.2 menekankan pentingnya untuk tidak mengganggu pengguna saat mereka berinteraksi dengan situs web. Gangguan tersebut termasuk elemen yang bergerak, berkedip, atau menggulung yang dimulai secara otomatis dan bergerak, berkedip, atau scrolluing lebih dari lima detik di halaman. Ini juga mencakup konten yang diperbarui secara otomatis di halaman tanpa peringatan.

Elemen yang memperbarui atau bergerak secara otomatis di halaman memerlukan semacam kontrol untuk menjeda, menghentikan, atau menyembunyikan elemen tersebut. Jika tidak, ini bisa menjadi masalah bagi siapa saja yang kesulitan membaca atau berinteraksi dengan cepat dengan objek yang bergerak. Elemen yang diperbarui secara otomatis juga dapat menyebabkan masalah bagi pengguna screen reader.

Mengapa ini penting?

Memberikan kemampuan untuk menjeda, menghentikan, atau menyembunyikan elemen yang bergerak dan memperbarui memungkinkan pengguna dengan masalah penglihatan atau mobilitas untuk berinteraksi dengan konten di halaman sesuai kecepatan mereka sendiri. Jika elemen terus bergerak di layar, berkedip masuk atau keluar dari tampilan, atau menggulung lebih dari lima detik, ini bisa membuat pusing dan membingungkan siapa saja. Namun, ini akan sangat mempengaruhi pengguna dengan gangguan vestibular atau gangguan kejang. Selain itu, pengguna dengan gangguan penglihatan atau mereka yang memiliki disabilitas membaca dan belajar mungkin kesulitan membaca konten dalam jangka waktu tersebut, dan mereka yang menghadapi tantangan mobilitas mungkin tidak dapat mencapainya tepat waktu.

Selain itu, jika informasi terus diperbarui di halaman, misalnya, ticker berita, ini bisa membuat bingung dan sulit bagi pengguna screen reader yang terus terganggu saat menjelajah halaman dengan pengumuman pembaruan.

Mari kita lihat contoh di mana kita disajikan dengan carousel item yang sedang dijual.

Ini sudah cukup mengganggu bagi semua orang karena pengguna terpaksa menunggu hingga item yang mereka inginkan muncul kembali dan kemudian harus bergegas untuk mengkliknya tepat waktu. Namun, ini sangat bermasalah bagi pengguna dengan masalah penglihatan, membaca, atau mobilitas. Tidak ada cara untuk menghentikan pergerakan ini, dan pengguna tidak diberi kesempatan untuk menambahkan item yang diinginkan ke keranjang belanja.

Situasi seperti ini dapat dengan mudah diperbaiki dengan memastikan ada cara untuk menjeda carousel sepenuhnya dan bahkan menyertakan cara untuk mengakses item sebelumnya dan berikutnya sehingga mereka memiliki kesempatan untuk melakukan pembelian.

WCAG 2.2.2 bertujuan untuk memastikan bahwa pengguna dengan gangguan penglihatan, membaca, dan mobilitas dapat menyerap konten dan mengidentifikasi elemen tanpa kesulitan. Dan agar pengguna dengan gangguan vestibular dan kejang tidak dipicu untuk mengalami kejang atau pusing akibat konten yang bergerak. Pedoman ini bertujuan untuk memastikan bahwa semua pengguna dapat mengakses dan mengontrol konten.

Siapa yang terpengaruh?

Pengguna low vision; pengguna dengan disabilitas kognitif, disabilitas membaca, dan belajar; pengguna dengan masalah mobilitas atau kontrol motorik halus; serta pengguna dengan gangguan vestibular dan kejang.

Elemen animasi, bergerak, atau yang diperbarui yang ditampilkan bersamaan dengan konten situs dapat secara dramatis memengaruhi pengalaman pengguna di situs tersebut, terutama jika mereka memiliki gangguan penglihatan, disabilitas kognitif, atau masalah mobilitas. Low vision menyulitkan untuk melihat dan memahami detail, dan jika konten bergerak, hal ini menjadi lebih bermasalah. Pembesar layar mungkin tidak membantu dalam kasus ini karena konten bisa terus bergerak keluar dari jangkauan yang terlihat bagi pengguna yang melakukan zoom, yang justru menambah rasa kesal. Pengguna dengan disabilitas kognitif, membaca, dan belajar juga membutuhkan lebih banyak waktu untuk memahami informasi—begitu pula dengan pengguna yang memiliki masalah mobilitas. Jika elemen interaktif terus bergerak atau sudah hilang, yang akan terjadi adalah pengguna yang frustrasi.

Misalnya, iklan web yang menutupi sebagian konten dan tidak memiliki kontrol untuk menjeda atau menutupnya akan menghalangi keterlibatan pengguna dengan situs secara keseluruhan. Atau, radar cuaca yang tidak menawarkan cara untuk menjedanya akan menyulitkan pengguna untuk menyerap informasi.

Pengguna dengan gangguan kejang dan vestibular juga dapat terpicu oleh konten bergerak yang tidak dapat mereka kendalikan. Ada kemungkinan besar bahwa konten yang bergerak dapat memicu kejang, yang sangat berbahaya. Konten bergerak bahkan dapat menyebabkan pusing, membuat mereka merasa ingin muntah, pingsan, jatuh, atau mengalami migrain.

Ambil contoh sebuah news carousel yang berpindah tanpa peringatan.

Elemen yang bergerak, berkedip, atau menggulir di halaman perlu menyediakan semacam kontrol agar pengguna dapat berinteraksi dengan dan memahami konten di halaman tersebut. Jika pengguna tidak diberikan alat yang tepat untuk mengendalikannya, hal ini akan menyebabkan berbagai masalah terkait fokus dan konsentrasi.

Cara menerapkan WCAG 2.2.2

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

Izinkan konten untuk dijeda dan dimulai kembali

Jika ada konten yang menggulir atau bergerak di situs, kamu harus menyediakan cara untuk menghentikan atau menghentikan konten tersebut. Dengan cara ini, pengguna dapat menghentikannya untuk membaca konten atau mengurangi gangguan yang disebabkan oleh pergerakan tersebut.

Beberapa metode untuk mengatasi ini adalah dengan menyediakan kontrol interaktif atau pintasan keyboard, yang semuanya harus dijelaskan dengan jelas dan disajikan.

Gunakan skrip untuk menambahkan kemampuan untuk mengontrol kedipan dan scrolling

Konten yang berkedip atau bergerak bisa menjadi gangguan ketika tidak ada cara untuk mengontrol apa yang terjadi. Ini termasuk elemen yang berkedip yang tidak pernah berhenti. Animasi dan pergerakan semacam ini bisa berdampak negatif pada pengalaman pengguna, terutama bagi mereka yang memiliki disabilitas.

Untuk mencegahnya, kamu bisa menyertakan skrip untuk menangani elemen-elemen ini. Salah satu cara adalah dengan menulis skrip yang mengontrol elemen berkedip dan menghentikannya berkedip dalam waktu lima detik. Cara lain adalah menulis beberapa JavaScript yang dapat menampilkan kontrol yang dapat digunakan pengguna untuk mengakses versi ‘lengkap’ agar mereka bisa membaca semuanya.

Konten yang berkedip tidak boleh berlangsung lebih dari lima detik. Ini juga berlaku untuk gambar GIF animasi, yang bisa sedikit lebih sulit untuk diatasi, namun sangat berharga dalam jangka panjang. Gambar GIF animasi menggunakan frame, laju frame, dan pengulangan untuk menentukan berapa lama gambar tersebut dianimasikan. Variabel yang paling umum untuk disesuaikan adalah jumlah pengulangan dan memastikan semuanya tetap dalam batas lima detik.

Pastikan konten yang berkedip, bergerak, atau terupdate, otomatis memiliki kontrol

Benda yang berkedip dan bergerak bisa sangat mengganggu dan memecah konsentrasi. Gambar GIF animasi tidak terkecuali. Mereka juga bisa menjadi gangguan yang cukup besar jika berlangsung terlalu lama. Kamu bisa berikan cara untuk mengurangi tindakan berkedip dan mengontrolnya untuk membantu pengguna.

Ini juga mencakup carousel yang terupdate otomatis, ticker berita, dan video player. Harus ada cara untuk menghentikan atau memberhentikan konten tersebut. Dengan melakukan ini, pengguna akan memiliki lebih banyak kontrol atas pengalaman mereka dan memberi mereka waktu untuk membaca konten atau menghentikan aksi agar mereka bisa fokus pada bagian lain dari halaman.

Sediakan mekanisme untuk memuat ulang halaman tanpa konten yang berkedip

Untuk pengguna yang benar-benar tidak bisa menggunakan halaman dengan konten yang berkedip, sangat disarankan untuk menyediakan kontrol yang memungkinkan pengguna untuk memuat ulang halaman tanpa konten yang berkedip. Ini pada akhirnya akan mencegah masalah gangguan, kejang, dan pusing.

Menambahkan kontrol yang mengatakan "Muat ulang tanpa animasi" di bagian atas halaman, misalnya, akan sangat membantu basis pengguna kamu dan memberikan pengalaman yang lebih aksesibel secara keseluruhan. Ketika halaman dimuat ulang, itu harus identik dengan halaman asli, tetapi konten yang seharusnya berkedip atau dianimasikan kini akan menjadi statis dan terlihat jelas. Dan, yang paling penting, tidak berkedip.

Selain itu, kamu bisa menambahkan media query untuk prefers-reduced-motion dan ini akan menjadi kesempatan yang sangat baik bagi pengguna untuk langsung mendarat di halaman dan tidak perlu menghadapi hiruk-pikuk animasi atau gerakan. Query hebat ini dapat membantu mendeteksi apakah pengguna sedang menggunakan preferensi sistem operasi atau browser untuk meminimalkan jumlah animasi atau gerakan pada sistem mereka. Baik CSS maupun JavaScript dapat digunakan untuk memeriksa keberadaan pengaturan ini, dan dari situ, kode dapat menangani situasi ini dengan lebih efisien. Misalnya, carousel berita yang secara otomatis dianimasikan secara default dapat diatur untuk tidak dianimasikan jika pengguna telah menunjukkan preferensi mereka untuk mengurangi gerakan.

Karena pengaturan ini agak tersembunyi, pengaturannya tidak selalu dapat diandalkan, tetapi itu adalah tambahan yang bagus untuk kode kamu dan sangat berguna untuk dihormati bagi mereka yang mengaktifkan pengaturan ini.

Kesimpulan

Memenuhi kriteria WCAG 2.2.2 untuk elemen yang bergerak, berkedip, dan terupdate otomatis pada halaman akan memastikan bahwa konten kamu dapat diakses oleh semua pengguna tanpa mengorbankan kesehatan dan konsentrasi mereka. Mengikuti pedoman ini akan memungkinkan setiap pengguna untuk merasakan, memahami, dan fokus pada informasi yang disampaikan.