Preferreds-Reduced-motion: Terkadang lebih sedikit gerakan lebih baik

Kueri media prefers-reduced-motion mendeteksi apakah pengguna telah meminta sistem operasi untuk meminimalkan jumlah animasi atau gerakan yang digunakannya.

Thomas Steiner

Tidak semua orang menyukai animasi atau transisi dekoratif, dan beberapa pengguna bahkan mengalami mabuk perjalanan saat melihat scroll paralaks, efek zoom, dan lainnya. Kueri media preferensi pengguna prefers-reduced-motion memungkinkan Anda mendesain varian situs dengan gerakan yang dikurangi untuk pengguna yang telah menyatakan preferensi ini.

Terlalu banyak gerakan dalam kehidupan nyata dan di web

Beberapa hari yang lalu, saya bermain seluncur es bersama anak-anak. Hari itu sangat indah, matahari bersinar, dan gelanggang es dipenuhi orang ⛸. Satu-satunya masalahnya: Saya tidak bisa mengatasi keramaian dengan baik. Dengan begitu banyak target yang bergerak, saya gagal fokus pada apa pun, dan akhirnya merasa bingung dan merasa sangat terbebani secara visual, hampir seperti menatap sarang semut 🐜.

Terkadang, hal yang sama dapat terjadi di web: dengan iklan berkedip, efek paralaks yang menarik, animasi pengungkapan yang mengejutkan, video yang diputar otomatis, dan lainnya, web terkadang bisa sangat membingungkan… Untungnya, tidak seperti di kehidupan nyata, ada solusi untuk hal tersebut. Kueri media CSS prefers-reduced-motion memungkinkan developer membuat varian halaman untuk pengguna yang lebih memilih gerakan yang dikurangi. Hal ini dapat terdiri dari apa saja, mulai dari tidak memutar video secara otomatis hingga menonaktifkan efek dekoratif tertentu, hingga mendesain ulang halaman sepenuhnya untuk pengguna tertentu.

Sebelum membahas fitur ini, mari kita mundur selangkah dan memikirkan tujuan penggunaan animasi di web. Jika ingin, Anda juga dapat melewati informasi latar belakang dan langsung melihat detail teknis.

Animasi di web

Animasi sering kali digunakan untuk memberikan masukan kepada pengguna, misalnya, untuk memberi tahu mereka bahwa tindakan telah diterima dan sedang diproses. Misalnya, di situs belanja, produk dapat dianimasikan agar "terbang" ke keranjang belanja virtual, yang digambarkan sebagai ikon di pojok kanan atas situs.

Kasus penggunaan lainnya melibatkan penggunaan gerakan untuk memanipulasi persepsi pengguna dengan menggunakan campuran layar kerangka, metadata kontekstual, dan pratinjau gambar berkualitas rendah untuk memakan banyak waktu pengguna dan membuat seluruh pengalaman terasa lebih cepat. Tujuannya adalah untuk memberikan konteks kepada pengguna tentang apa yang akan datang dan memuat item secepat mungkin.

Terakhir, ada efek dekoratif seperti gradien animasi, scroll paralaks, video latar belakang, dan beberapa efek lainnya. Meskipun banyak pengguna menikmati animasi tersebut, beberapa pengguna tidak menyukainya karena mereka merasa terganggu atau diperlambat olehnya. Dalam kasus terburuk, pengguna bahkan dapat menderita mabuk perjalanan seolah-olah itu adalah pengalaman di kehidupan nyata, jadi bagi pengguna ini, mengurangi animasi adalah kebutuhan medis.

Gangguan spektrum vestibular yang dipicu gerakan

Beberapa pengguna mengalami gangguan atau mual akibat konten animasi. Misalnya, animasi scrolling dapat menyebabkan gangguan vestibular saat elemen selain elemen utama yang terkait dengan scrolling bergerak terlalu banyak. Misalnya, animasi scrolling paralaks dapat menyebabkan gangguan vestibular karena elemen latar belakang bergerak dengan kecepatan yang berbeda dari elemen latar depan. Reaksi gangguan vestibular (telinga bagian dalam) mencakup pusing, mual, dan sakit kepala migrain, dan terkadang memerlukan istirahat di tempat tidur untuk pulih.

Menghilangkan gerakan di sistem operasi

Banyak sistem operasi telah memiliki setelan aksesibilitas untuk menentukan preferensi gerakan yang dikurangi dalam waktu yang lama. Screenshot berikut menunjukkan preferensi Kurangi gerakan di macOS Mojave dan preferensi Hapus animasi di Android Pie. Jika dicentang, preferensi ini menyebabkan sistem operasi tidak menggunakan efek dekoratif seperti animasi peluncuran aplikasi. Aplikasi itu sendiri dapat dan harus mematuhi setelan ini, serta menghapus semua animasi yang tidak perlu.

Menghapus gerakan di web

Media Queries Level 5 juga menghadirkan preferensi pengguna untuk mengurangi gerakan ke web. Kueri media memungkinkan penulis menguji dan mengkueri nilai atau fitur agen pengguna atau perangkat tampilan secara independen dari dokumen yang dirender. Kueri media prefers-reduced-motion digunakan untuk mendeteksi apakah pengguna telah menyetel preferensi sistem operasi untuk meminimalkan jumlah animasi atau gerakan yang digunakan. Dapat memiliki dua kemungkinan nilai:

• no-preference: Menunjukkan bahwa pengguna tidak membuat preferensi di sistem operasi yang mendasarinya. Nilai kata kunci ini dievaluasi sebagai false dalam konteks boolean.
• reduce: Menunjukkan bahwa pengguna telah menetapkan preferensi sistem operasi yang menunjukkan bahwa antarmuka harus meminimalkan gerakan atau animasi, sebaiknya hingga semua gerakan yang tidak penting dihapus.

Menggunakan kueri media dari konteks CSS dan JavaScript

Seperti semua kueri media, prefers-reduced-motion dapat diperiksa dari konteks CSS dan dari konteks JavaScript.

Untuk mengilustrasikan keduanya, asumsikan saya memiliki tombol pendaftaran penting yang ingin saya klik oleh pengguna. Saya dapat menentukan animasi "bergetar" yang menarik perhatian, tetapi sebagai warga web yang baik, saya hanya akan memutarnya untuk pengguna yang secara eksplisit menyetujui animasi, tetapi tidak untuk pengguna lain, yang dapat berupa pengguna yang telah memilih untuk tidak menggunakan animasi, atau pengguna di browser yang tidak memahami kueri media.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Untuk mengilustrasikan cara menggunakan prefers-reduced-motion dengan JavaScript, bayangkan saya telah menentukan animasi kompleks dengan Web Animations API. Meskipun aturan CSS akan dipicu secara dinamis oleh browser saat preferensi pengguna berubah, untuk animasi JavaScript, saya harus memantau perubahan sendiri, lalu menghentikan animasi yang mungkin sedang berjalan secara manual (atau memulainya kembali jika pengguna mengizinkan):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Perhatikan bahwa tanda kurung di sekitar kueri media sebenarnya wajib ada:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Menggunakan kueri media dari konteks <picture>

Kasus penggunaan yang menarik adalah membuat pemutaran AVIF, WebP, atau GIF animasi bergantung pada atribut media. Jika (prefers-reduced-motion: no-preference) dievaluasi menjadi true, maka aman untuk menampilkan versi animasi, jika tidak, tampilkan versi statis:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Anda dapat melihat contoh berikut. Coba alihkan preferensi gerakan perangkat Anda untuk melihat perbedaannya.

Menemukan preferensi pengguna pada waktu permintaan

Header petunjuk klien Sec-CH-Prefers-Reduced-Motion memungkinkan situs mendapatkan preferensi gerakan pengguna secara opsional pada waktu permintaan, sehingga server dapat menyisipkan CSS yang tepat untuk alasan performa.

Demo

Saya telah membuat demo kecil berdasarkan 🐈 HTTP status cats yang luar biasa dari Rogério Vicente. Pertama, luangkan waktu untuk mengapresiasi leluconnya, sangat lucu dan saya akan menunggu. Sekarang setelah Anda kembali, izinkan saya memperkenalkan demo. Saat Anda men-scroll, setiap kucing status HTTP akan muncul secara bergantian dari sisi kanan atau kiri. Animasi 60 FPS yang sangat lancar, tetapi seperti yang diuraikan sebelumnya, beberapa pengguna mungkin tidak menyukainya atau bahkan merasa mual karena animasi tersebut, sehingga demo diprogram untuk mematuhi prefers-reduced-motion. Hal ini bahkan berfungsi secara dinamis, sehingga pengguna dapat mengubah preferensi mereka secara langsung, tanpa perlu memuat ulang. Jika pengguna memilih gerakan yang lebih sedikit, animasi pengungkapan yang tidak diperlukan akan dihilangkan, dan hanya gerakan scroll biasa yang tersisa. Screencast berikut menunjukkan cara kerja demo:

Kesimpulan

Menghormati preferensi pengguna adalah hal penting bagi situs modern, dan browser mengekspos lebih banyak fitur untuk memungkinkan developer web melakukannya. Contoh lain yang diluncurkan adalah prefers-color-scheme, yang mendeteksi apakah pengguna lebih menyukai skema warna terang atau gelap. Anda dapat membaca semuanya tentang prefers-color-scheme dalam artikel saya yang berjudul Hello Darkness, My Old Friend 🌒.

Grup Kerja CSS menstandardisasi lebih banyak kueri media preferensi pengguna seperti prefers-reduced-transparency (mendeteksi apakah pengguna lebih memilih transparansi yang dikurangi), prefers-contrast (mendeteksi apakah pengguna telah meminta sistem untuk meningkatkan atau mengurangi jumlah kontras antara warna yang berdekatan), dan inverted-colors (mendeteksi apakah pengguna lebih memilih warna terbalik).

(Bonus) Menerapkan gerakan yang dikurangi di semua situs

Tidak semua situs akan menggunakan prefers-reduced-motion, atau mungkin tidak cukup signifikan untuk selera Anda. Jika karena alasan apa pun Anda ingin menghentikan gerakan di semua situs, Anda dapat melakukannya. Salah satu cara untuk melakukannya adalah dengan menyisipkan lembar gaya dengan CSS berikut ke setiap halaman web yang Anda kunjungi. Ada beberapa ekstensi browser di luar sana (gunakan dengan risiko Anda sendiri!) yang memungkinkan hal ini.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

Cara kerjanya adalah CSS sebelumnya menggantikan durasi semua animasi dan transisi ke waktu yang sangat singkat sehingga tidak terlihat lagi. Karena beberapa situs bergantung pada animasi agar dapat berjalan dengan benar (mungkin karena langkah tertentu bergantung pada pemicuan peristiwa animationend), pendekatan animation: none !important; yang lebih radikal tidak akan berhasil. Bahkan, peretasan sebelumnya tidak dijamin berhasil di semua situs (misalnya, tidak dapat menghentikan gerakan yang dimulai menggunakan Web Animations API), jadi pastikan untuk menonaktifkannya saat Anda melihat kerusakan.

Resource

• Draf Editor Terbaru dari spesifikasi Media Queries Level 5.
• prefers-reduced-motion di Status Platform Chrome.
• prefers-reduced-motion Bug Chromium.
• Blink Intent to Implement posting.

Ucapan terima kasih

Terima kasih banyak kepada Stephen McGruer yang telah menerapkan prefers-reduced-motion di Chrome dan, bersama Rob Dodson, juga telah meninjau dokumen ini.