Animasi dan gerakan

Pernahkah Anda naik mobil, kapal, atau pesawat dan tiba-tiba merasakan dunia putar? Atau Anda mengalami migrain yang sangat buruk sehingga animasi di ponsel atau tablet Anda, dibuat untuk "menyenangkan" tiba-tiba membuatmu sakit? Atau mungkin Anda sudah sensitif terhadap semua jenis {i>motion<i}? Ini adalah contoh dari berbagai jenis gangguan vestibular.

Pada usia 40, lebih dari 35% orang dewasa akan mengalami beberapa bentuk disfungsi vestibular. Ini dapat menyebabkan pusing sementara, vertigo yang disebabkan oleh migrain, atau disabilitas vesibular permanen.

Selain memicu vertigo, banyak orang juga bergerak, berkedip, atau men-scroll dan mengganggu konten. Orang dengan ADHD dan gangguan defisit perhatian lainnya mungkin sangat terganggu oleh elemen yang membuatnya lupa mengapa mereka bahkan masuk ke situs web atau aplikasi Anda di posisi pertama.

Dalam modul ini, kita akan melihat beberapa cara untuk membantu mendukung orang dengan lebih baik dengan segala jenis gangguan yang dipicu oleh gerakan.

Konten berkedip dan bergerak

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

Panduan cara melakukan flash WCAG merekomendasikan hal berikut:

Berkedip lebih dari tiga kali dalam satu detik
Berkedip di bawah nilai minimum flash merah dan flash merah.

Flash ini, paling baik, dapat menyebabkan ketidakmampuan menggunakan halaman web, atau, paling buruknya, dapat 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 itu cenderung menyebabkan kejang. Tidak semua konten perlu dievaluasi oleh PEAT, tetapi konten yang berisi transisi cepat atau berkedip antara terang dan gelap warna latar belakang harus dievaluasi, agar aman.

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

Misalkan Anda yakin bahwa gerakan elemen tidak penting, tetapi dapat meningkatkan keseluruhan pengalaman pengguna, atau Anda tidak dapat menghilangkan pergerakan untuk alasan. Dalam hal ini, Anda harus mengikuti petunjuk WCAG pedoman tentang gerakan. Pedoman tersebut menyatakan bahwa Anda harus membuat opsi bagi pengguna untuk menjeda, menghentikan, atau menyembunyikan gerakan untuk: elemen bergerak, berkedip, atau menggulir yang tidak penting yang mulai secara otomatis, berlangsung lebih dari lima detik, dan merupakan bagian dari laman lainnya yang kurang penting.

Menjeda, menghentikan, atau menyembunyikan gerakan

Menambahkan jeda, menghentikan, atau menyembunyikan di halaman Anda untuk memungkinkan pengguna menonaktifkan animasi bergerak. Anda dapat melakukannya di tingkat layar atau tingkat elemen.

Misalnya, produk digital Anda menyertakan banyak animasi. Sebaiknya tambahkan tombol JavaScript yang dapat diakses agar pengguna dapat mengontrol pengalaman mereka. Saat tombol dialihkan ke "gerak mati," semua animasi berhenti di layar itu dan yang lainnya.

Menggunakan kueri media

Selain selektif tentang animasi Anda, memberikan pilihan kepada pengguna untuk menjeda, menghentikan, menyembunyikan gerakan, dan menghindari loop animasi tanpa henti, Anda juga dapat pertimbangkan juga untuk menambahkan kueri media yang berfokus pada gerakan. Hal ini memberi pengguna Anda bahkan lebih banyak pilihan untuk apa yang ditampilkan di layar.

`@prefers-reduced-motion`

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

UI setelan Tampilan MacOS, dengan fitur Kurangi gerakan diaktifkan.

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

Dukungan Browser

Sumber

Di MacOS dan Android, pengguna mengaktifkan setelan untuk mengurangi gerakan. Pada MacOS, pengguna dapat menyetel Mengurangi gerakan di Setelan > Aksesibilitas > Tampilkan. Setelan Android adalah Hapus animasi. Di Windows, setelan dibingkai positif sebagai Tampilkan animasi, yang diaktifkan secara default. Pengguna harus mengubah pengaturan ini untuk mengurangi gerakan.

Atau, seperti yang ditunjukkan dalam kumpulan contoh berikutnya, Anda bisa mengodekan semua animasi Anda agar berhenti bergerak dalam waktu lima detik atau kurang, alih-alih terus memutar ulang tanpa henti.

{i>Progressive enhancement<i} untuk gerakan

Sebagai desainer dan developer, kita memiliki banyak pilihan, termasuk status gerakan default dan seberapa banyak gerakan yang ditampilkan. Mari perhatikan kembali contoh terakhir tentang gerak.

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

Kami tidak dapat memprediksi tingkat pergerakan yang akan menyebabkan masalah bagi orang-orang dengan kejang, vestibular, dan gangguan visual lainnya. Bahkan sejumlah kecil gerakan di layar dapat memicu pusing, penglihatan kabur, atau lebih parah. Jadi, pada pada contoh berikut, secara {i>default<i} kita adalah tanpa animasi.

Kueri media berlapis

Anda dapat menggunakan beberapa kueri media untuk memberikan lebih banyak pilihan kepada pengguna. Mari kita menggunakan @prefers-color-scheme, @prefers-contrast, dan @prefers-reduced-motion secara keseluruhan.

Izinkan pengguna untuk memilih

Meskipun menyenangkan untuk mengintegrasikan animasi ke dalam produk digital kita untuk kita harus ingat bahwa beberapa orang akan terpengaruh oleh desain ini. Sensitivitas gerakan dapat mempengaruhi siapa saja, dari merasa sedikit tidak nyaman hingga menyebabkan penyakit atau kejang yang melemahkan.

Anda dapat menggunakan berbagai alat agar pengguna dapat memutuskan yang terbaik daripada mengira-ngira berapa banyak gerakan yang terlalu banyak. Misalnya, tambahkan untuk mengaktifkan atau menonaktifkan animasi di situs atau aplikasi web Anda. Pertimbangkan menetapkan tombol tersebut ke nonaktif secara default.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang aksesibilitas gerakan dan animasi.

Apa yang bisa kita buat yang mencerminkan pengaturan sistem operasi untuk {i>motion<i}?

@prefers-reduced-motion

Ya. Kueri media ini memungkinkan Anda memutuskan berapa banyak gerakan yang akan digunakan berdasarkan setelan Tampilan pengguna. Setelan ini berbeda di berbagai sistem operasi, jadi pertimbangkan untuk menerapkan pilihan gerakan selain kueri media ini.

Tombol beralih JavaScript

Kurang tepat. Tombol memungkinkan pengguna membuat pilihan setelah tiba di situs Anda, tetapi tidak dapat membaca setelan pengguna.