Animasi dan gerakan

Pernahkah Anda berada di dalam mobil, perahu, atau pesawat dan tiba-tiba merasa dunia berputar? Atau pernah mengalami migrain parah sehingga animasi di ponsel atau tablet Anda, yang dibuat untuk "menyenangkan" Anda, tiba-tiba membuat Anda merasa mual? Atau mungkin Anda selalu sensitif terhadap semua jenis gerakan? Berikut adalah contoh berbagai jenis gangguan vestibular.

Pada usia 40 tahun, lebih dari 35% orang dewasa akan mengalami beberapa bentuk disfungsi vestibular. Hal ini dapat menyebabkan pusing sementara, vertigo akibat migrain, atau disabilitas vestibular yang lebih permanen.

Selain memicu vertigo, banyak orang merasa terganggu dengan konten yang bergerak, berkedip, atau di-scroll. Orang dengan ADHD dan gangguan defisit perhatian lainnya mungkin terlalu terganggu oleh elemen animasi Anda sehingga mereka lupa mengapa mereka membuka situs atau aplikasi Anda.

Dalam modul ini, kita akan melihat beberapa cara untuk membantu memberikan dukungan yang lebih baik kepada orang-orang dengan semua jenis gangguan yang dipicu oleh gerakan.

Konten yang berkedip dan bergerak

Saat membuat animasi dan gerakan, tanyakan pada diri Anda sendiri apakah gerakan elemen berlebihan. Misalnya, warna yang berkedip dari gelap ke terang atau gerakan cepat di layar dapat menyebabkan kejang pada penderita epilepsi fotosensitif. Diperkirakan 3% orang dengan epilepsi menderita fotosensitivitas, dan kondisi ini lebih umum terjadi pada wanita dan orang yang lebih muda.

Pedoman WCAG tentang kilatan tidak merekomendasikan hal berikut:

• Berkedip lebih dari tiga kali dalam satu detik
• Kilatan di bawah nilai minimum kilatan umum dan kilatan merah.

Kilatan ini, paling tidak, dapat menyebabkan ketidakmampuan untuk menggunakan halaman web atau, paling buruk, menyebabkan penyakit.

Untuk setiap gerakan ekstrem, Anda harus mengujinya menggunakan Alat Analisis Epilepsi Fotosensitif (PEAT). PEAT adalah alat gratis untuk mengidentifikasi apakah konten, video, atau animasi layar berpotensi menyebabkan kejang. Tidak semua konten perlu dievaluasi oleh PEAT, tetapi konten yang berisi transisi cepat atau berkedip antara warna latar belakang terang dan gelap harus dievaluasi, untuk berjaga-jaga.

Pertanyaan lain yang harus Anda tanyakan pada diri sendiri tentang animasi dan gerakan adalah apakah gerakan elemen penting untuk memahami konten atau tindakan di layar. Jika tidak penting, pertimbangkan untuk menghapus semua gerakan—bahkan gerakan mikro—dari elemen yang Anda buat atau desain.

Misalkan Anda yakin bahwa gerakan elemen tidak penting, tetapi dapat meningkatkan pengalaman pengguna secara keseluruhan, atau Anda tidak dapat menghapus gerakan karena alasan lain. Dalam hal ini, Anda harus mengikuti pedoman tentang gerakan WCAG. Pedoman menyatakan bahwa Anda harus membuat opsi bagi pengguna untuk menjeda, menghentikan, atau menyembunyikan gerakan untuk elemen bergerak, berkedip, atau men-scroll yang tidak penting yang dimulai secara otomatis, berlangsung lebih dari lima detik, dan merupakan bagian dari elemen halaman lainnya.

Menjeda, menghentikan, atau menyembunyikan gerakan

Tambahkan mekanisme jeda, hentikan, atau sembunyikan ke halaman Anda untuk memungkinkan pengguna menonaktifkan animasi gerakan yang berpotensi menimbulkan masalah. Anda dapat melakukannya di tingkat layar atau tingkat elemen.

Misalnya, produk digital Anda mencakup banyak animasi. Pertimbangkan untuk menambahkan tombol JavaScript yang dapat diakses agar pengguna dapat mengontrol pengalaman mereka. Saat tombol dialihkan ke "gerakan nonaktif", semua animasi akan dibekukan di layar tersebut dan semua layar lainnya.

Menggunakan kueri media

Selain selektif dalam memilih animasi, memberi pengguna opsi untuk menjeda, menghentikan, menyembunyikan gerakan, dan menghindari loop animasi tanpa batas, Anda juga dapat mempertimbangkan untuk menambahkan kueri media yang berfokus pada gerakan. Hal ini memberi pengguna Anda lebih banyak pilihan terkait apa yang ditampilkan di layar.

@prefers-reduced-motion

Mirip dengan kueri media yang berfokus pada warna di modul warna, kueri media @prefers-reduced-motion memeriksa setelan OS pengguna yang terkait dengan animasi.

Pengguna dapat menyetel preferensi tampilan untuk mengurangi gerakan. Setelan ini berbeda di berbagai sistem operasi, dan dapat dibingkai secara positif atau negatif. Dengan @prefers-reduced-motion, Anda dapat mendesain situs yang menghormati preferensi ini.

Di macOS dan Android, pengguna mengaktifkan setelan untuk mengurangi gerakan. Di macOS, pengguna dapat menyetel Kurangi gerakan di Setelan > Aksesibilitas > Tampilan. Setelan Android adalah Hapus animasi. Di Windows, setelan ini dibingkai secara positif sebagai Tampilkan animasi, yang aktif secara default. Pengguna harus menonaktifkan setelan ini untuk mengurangi gerakan.

Untuk memastikan aksesibilitas bagi individu yang mengalami kesulitan dengan gerakan, bahkan animasi yang lebih pendek dari batas 5 detik yang diuraikan dalam pedoman WCAG 2.0 AA harus didekati dengan hati-hati, dan metode yang paling andal adalah memberdayakan pengguna yang telah menunjukkan preferensi untuk mengurangi gerakan dengan memberi mereka kontrol eksklusif atas animasi, sehingga mereka dapat memulai dan menghentikan animasi menggunakan kontrol khusus, seperti tombol putar dan tombol jeda.

Peningkatan progresif untuk gerakan

Sebagai desainer dan developer, kita memiliki banyak pilihan yang harus dibuat, termasuk status gerakan default dan seberapa banyak gerakan yang akan ditampilkan. Lihat kembali contoh terakhir tentang gerakan.

Misalkan kita memutuskan bahwa animasi tidak diperlukan untuk memahami konten di layar. Dalam hal ini, kita dapat memilih untuk menyetel status default ke animasi gerakan yang dikurangi, bukan versi gerakan penuh. Kecuali jika pengguna secara khusus meminta animasi, animasi akan dinonaktifkan.

Kami tidak dapat memprediksi tingkat gerakan yang akan menyebabkan masalah bagi penderita kejang, gangguan vestibular, dan gangguan visual lainnya. Bahkan sedikit gerakan di layar dapat memicu pusing, penglihatan kabur, atau lebih buruk. Jadi, dalam contoh berikut, kita menggunakan default tanpa animasi.

Kueri media berlapis

Anda dapat menggunakan beberapa kueri media untuk memberi pengguna lebih banyak pilihan. Mari gunakan @prefers-color-scheme, @prefers-contrast, dan @prefers-reduced-motion secara bersamaan.

Izinkan pengguna Anda memilih

Meskipun membuat animasi dalam produk digital untuk menyenangkan pengguna bisa jadi hal yang menarik, kita harus ingat bahwa beberapa orang akan terpengaruh oleh desain ini. Sensitivitas terhadap gerakan dapat memengaruhi siapa saja, mulai dari menyebabkan sedikit rasa tidak nyaman hingga menyebabkan penyakit atau kejang yang melemahkan.

Anda dapat menggunakan sejumlah alat yang berbeda untuk memungkinkan pengguna memutuskan apa yang terbaik bagi mereka, daripada menebak seberapa banyak gerakan yang terlalu berlebihan. Misalnya, tambahkan tombol untuk mengaktifkan atau menonaktifkan animasi dalam situs atau aplikasi web Anda. Pertimbangkan untuk menyetel tombol tersebut ke nonaktif secara default.