Pernahkah Anda naik mobil, perahu, atau pesawat dan tiba-tiba merasakan dunia berputar? Atau migrain yang sangat buruk sehingga animasi di ponsel atau tablet, yang dibuat untuk "menghibur" Anda, tiba-tiba membuat Anda sakit? Atau mungkin Anda selalu 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. Hal ini dapat menyebabkan pusing sementara, vertigo yang disebabkan migrain, atau disabilitas vestibular yang lebih permanen.
Selain memicu vertigo, banyak orang merasa konten yang bergerak, berkedip, atau men-scroll merupakan hal yang mengganggu. Orang dengan ADHD dan gangguan defisit perhatian lainnya mungkin sangat terganggu oleh elemen animasi sehingga mereka lupa mengapa mereka membuka situs atau aplikasi Anda sejak awal.
Dalam modul ini, kita akan melihat beberapa cara untuk membantu memberikan dukungan yang lebih baik bagi orang dengan semua jenis gangguan yang dipicu gerakan.
Mem-flash dan memindah konten
Saat membuat animasi dan gerakan, Anda harus bertanya pada diri sendiri apakah gerakan elemen tersebut berlebihan. Misalnya, warna yang berkedip dari gelap ke terang atau gerakan cepat pada layar, dapat menyebabkan kejang pada penderita epilepsi fotosensitif. Diperkirakan 3% penderita epilepsi menderita fotosensitivitas, dan ini lebih umum terjadi pada wanita dan orang yang lebih muda.
Panduan WCAG tentang melakukan flash menyarankan untuk tidak hal berikut:
- Berkedip lebih dari tiga kali dalam satu detik
- Berkedip di bawah batas flash umum dan flash merah.
Flash ini dapat menyebabkan ketidakmampuan menggunakan halaman web, atau, paling buruk, menyebabkan penyakit.
Untuk setiap gerakan ekstrem, Anda harus mengujinya menggunakan Photosensitive Epilepsy Analysis Tool (PEAT). PEAT adalah alat gratis untuk mengidentifikasi apakah konten, video, atau animasi pada layar cenderung menyebabkan kejang. Tidak semua konten perlu dievaluasi berdasarkan PUTIH, tetapi konten yang berisi transisi berkedip atau cepat antara warna latar belakang terang dan gelap harus dievaluasi, hanya untuk menjaga keamanan.
Pertanyaan lain yang harus Anda tanyakan pada diri sendiri tentang animasi dan gerakan adalah apakah gerakan elemen sangat penting untuk memahami konten atau tindakan di layar. Jika tidak penting, pertimbangkan untuk menghilangkan semua gerakan—bahkan gerakan mikro—dari elemen yang Anda bangun atau rancang.
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 panduan WCAG tentang gerakan. Panduan ini menyatakan bahwa Anda harus membuat opsi bagi pengguna untuk menjeda, menghentikan, atau menyembunyikan gerakan untuk: elemen bergerak, berkedip, atau scroll yang tidak penting dan dimulai secara otomatis, berlangsung lebih dari lima detik, dan merupakan bagian dari elemen halaman lainnya.
Menjeda, menghentikan, atau menyembunyikan gerakan
Tambahkan mekanisme jeda, berhenti, atau sembunyikan ke halaman Anda agar pengguna dapat menonaktifkan animasi gerakan yang berpotensi bermasalah. Anda dapat melakukannya pada tingkat layar atau tingkat elemen.
Misalnya, anggaplah produk digital Anda berisi 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 yang lainnya.
Menggunakan kueri media
Selain selektif terhadap animasi, dengan 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 lebih banyak pilihan terkait apa yang ditampilkan di layar.
@prefers-reduced-motion
Mirip dengan kueri media yang berfokus pada warna dalam modul warna, kueri media @prefers-reduced-motion memeriksa setelan OS pengguna yang terkait dengan animasi.
Pengguna dapat mengatur preferensi tampilan untuk mengurangi gerakan. Setelan ini berbeda di seluruh sistem operasi, dan dapat dibingkai secara positif atau negatif. Dengan @prefers-reduced-motion, Anda dapat mendesain situs yang mematuhi preferensi ini.
Di MacOS dan Android, pengguna mengaktifkan setelan untuk mengurangi gerakan. Di MacOS, pengguna dapat menyetel Reduce motion di Settings > Accessibility > Display. Setelan Android adalah Hapus animasi. Di Windows, setelan ini dibingkai secara positif sebagai Show animation, yang aktif secara default. Pengguna harus menonaktifkan pengaturan ini untuk mengurangi gerakan.
Atau, seperti yang ditampilkan dalam rangkaian contoh berikutnya, Anda dapat membuat kode semua animasi agar berhenti bergerak dalam waktu lima detik atau kurang, alih-alih bermain terus-menerus.
{i>Progressive enhancement <i}untuk gerakan
Sebagai desainer dan developer, kita memiliki banyak pilihan untuk dibuat, termasuk status gerakan default dan berapa banyak gerakan yang akan ditampilkan. Mari kita lihat kembali contoh terakhir tentang {i>motion<i}.
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 direduksi alih-alih versi gerakan penuh. Animasi akan dinonaktifkan, kecuali jika pengguna secara khusus meminta animasi.
Kita tidak dapat memprediksi level gerakan apa yang akan menyebabkan masalah bagi orang dengan kejang, vestibular, dan gangguan visual lainnya. Meskipun ada sedikit gerakan di layar, bisa membuat pusing, penglihatan kabur, atau lebih buruk. Jadi, dalam contoh berikut, secara default kita menetapkan tanpa animasi.
Kueri media berlapis
Anda dapat menggunakan beberapa kueri media untuk memberikan lebih banyak pilihan kepada pengguna. Mari
gunakan @prefers-color-scheme, @prefers-contrast, dan @prefers-reduced-motion
bersama-sama.
Izinkan pengguna untuk memilih
Meskipun membuat animasi ke dalam produk digital untuk menyenangkan pengguna adalah hal yang menyenangkan, penting untuk diingat bahwa beberapa orang akan terpengaruh oleh desain ini. Sensitivitas gerakan dapat memengaruhi siapa saja, mulai dari merasa tidak nyaman hingga menyebabkan penyakit yang melemahkan atau kejang.
Anda dapat menggunakan berbagai alat agar pengguna dapat memutuskan apa yang terbaik bagi mereka, daripada hanya memperkirakan banyaknya gerakan. Misalnya, tambahkan tombol untuk mengaktifkan atau menonaktifkan animasi dalam situs atau aplikasi web Anda. Pertimbangkan untuk menyetel default tombol tersebut ke nonaktif.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang aksesibilitas gerakan dan animasi.
Apa yang bisa kita bangun yang mencerminkan pengaturan sistem operasi untuk {i>motion<i}?
@prefers-reduced-motion