Gerak terkurangi

Pola aksesibilitas prefers-reduced-motion untuk menghormati preferensi pengguna.

Daftar isi

Gerak yang ramai dapat membuat sebagian pengguna pusing atau mual, sehingga sistem operasi menyediakan pengaturan pengurangan gerak yang dibaca browser melalui media feature prefers-reduced-motion. Topik ini membahas nilai media feature tersebut, pola penerapannya pada transisi dan animasi, kaitannya dengan gangguan vestibular, serta cara menjaga umpan balik yang tetap hadir tanpa gerakan yang luas.

Preferensi sistem yang terbaca browser#

Pengaturan gerak terkurangi (reduce motion) tersedia pada sistem operasi utama, biasanya di bagian aksesibilitas, dan pengguna mengaktifkannya atas alasan kesehatan atau kenyamanan masing-masing. Browser meneruskan preferensi tersebut kepada CSS melalui media feature prefers-reduced-motion, yang memiliki dua nilai yang mungkin, yaitu no-preference dan reduce. Nilai no-preference adalah nilai bawaan yang menyatakan pengguna tidak meminta pengurangan gerak, sedangkan reduce menyatakan sebaliknya.

Preferensi ini milik pengguna, bukan keputusan desain, sehingga pembacaannya tidak memerlukan syarat apa pun. Media feature bekerja di dalam @media biasa dan dapat digabungkan dengan syarat lain, misalnya lebar viewport. Karena keputusannya ada di tangan pengguna, tugas CSS adalah menyediakan kedua jalur tersebut, yaitu pengalaman bergerak penuh dan pengalaman yang tenang. Nilai reduce juga dapat diterapkan pada transisi, bukan hanya animasi, karena gerakan yang mengikuti kursor atau gulir termasuk yang perlu ditenangkan.

Media query prefers-reduced-motion#

Cara membacanya adalah blok @media dengan syarat prefers-reduced-motion: reduce, yang isinya hanya berlaku ketika pengguna meminta pengurangan gerak. Blok ini ditulis seperti media query lebar layar biasa, dan selektornya cukup menyasar elemen yang bergerak. Ketika preferensi pengguna berubah, browser menyesuaikan penerapan media query tersebut secara langsung tanpa memuat ulang halaman. Bentuk yang paling sederhana mematikan animasi yang ada:

css Contoh: mematikan animasi saat preferensi gerak dikurangi

@media (prefers-reduced-motion: reduce) {
  .pemberitahuan {
    animation: none;
  }
}

Pola di atas berfungsi, tetapi memiliki kelemahan struktural. Setiap animasi baru yang ditambahkan kelak harus diingat kembali di dalam blok reduce, dan satu yang terlupa membuat geraknya tetap berjalan. Kelalaian semacam ini sulit terdeteksi karena alat pengembangan jarang disetel ke preferensi reduce saat pengembangan berlangsung. Pendekatan yang lebih aman membalik logikanya, yaitu gerak hanya dideklarasikan ketika pengguna tidak meminta pengurangan, dan pola ini diuraikan pada bagian berikutnya.

Pola penerapan yang lazim#

Pola yang disarankan menempatkan deklarasi gerak di dalam @media (prefers-reduced-motion: no-preference), sehingga animasi hanya berjalan bagi pengguna yang tidak meminta pengurangan gerak. Definisi keyframe diletakkan di luar media query, karena definisi semata tidak menggerakkan apa pun sebelum ada elemen yang merujuknya. Sementara itu, blok reduce memperpendek durasi transisi ke hampir nol, bukan menghapusnya, agar umpan balik keadaan tetap terasa tanpa lintasan gerak yang panjang:

css Contoh: menghormati preferensi gerak terkurangi

@keyframes muncul {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gerak dekoratif hanya dideklarasikan bila pengguna
   tidak meminta pengurangan gerak */
@media (prefers-reduced-motion: no-preference) {
  .pemberitahuan {
    animation: muncul 400ms ease-out both;
  }
}

/* Umpan balik keadaan tetap hadir, tetapi durasi geraknya
   diperpendek ke hampir nol saat pengguna meminta pengurangan */
@media (prefers-reduced-motion: reduce) {
  .kartu-catatan {
    transition-duration: 0.01ms;
  }
}

Dengan pola tersebut, pengguna tanpa preferensi khusus menerima pemberitahuan yang masuk dengan animasi penuh, sedangkan pengguna dengan preferensi reduce menerima pemberitahuan yang tampil seketika. Transisi pada kartu catatan tetap berjalan pada kedua kelompok, karena yang diperpendek hanya durasinya, sedangkan perubahan warna sebagai umpan baliknya tetap terjadi. Apabila transisi kartu memuat perpindahan, perpendekan durasi yang sama menjadikan lintasannya praktis tidak terlihat tanpa menghilangkan tanda perubahannya.

Kaitan dengan gangguan vestibular#

Gangguan vestibular menyangkut sistem keseimbangan di telinga bagian dalam, dan penderitanya mudah pusing atau mual ketika melihat gerakan besar di layar. Gerak yang paling sering dipermasalahkan antara lain gulir paralaks, pembesaran yang luas, elemen yang berputar, serta konten yang meluncur masuk dari luar layar. Preferensi reduce motion justru berasal dari kebutuhan kelompok ini, sehingga menghormatinya berarti memperluas jangkauan pengguna yang dapat bekerja nyaman.

Tingkat keparahannya bervariasi antar pengguna, dan browser tidak dapat menilai animasi mana yang aman. Karena itu, keputusan diberikan sepenuhnya kepada pengguna melalui preferensi sistem, sedangkan CSS bertugas menyediakan versi yang tenang. Panduan aksesibilitas yang dirujuk pada dokumentasi MDN menyatakan bahwa gerak dari interaksi sebaiknya dapat dimatikan, dan prefers-reduced-motion adalah mekanisme bawaan browser untuk mewujudkannya.

Umpan balik yang tetap hadir#

Mengurangi gerak bukan berarti mengosongkan antarmuka dari semua perubahan. Umpan balik keadaan seperti perubahan warna tombol, garis tepi yang menegaskan, dan tanda centang tetap diberikan, karena semuanya terjadi tanpa lintasan yang panjang. Pudar pada opacity umumnya juga dapat diterima sebab elemennya tidak berpindah, meskipun durasinya tetap dipersingkat agar tidak menahan perhatian.

Gerak yang membawa informasi penting diperlakukan berbeda dari gerak dekoratif. Batang kemajuan, misalnya, boleh bergerak karena menyatakan proses yang sedang berjalan, tetapi lintasannya dibuat sependek mungkin atau diganti indikator yang tidak berpindah. Kuncinya adalah memisahkan dua hal, yaitu informasi yang harus tetap sampai dan hiasan gerak yang boleh hilang.

Kesalahan umum#

Kesalahan pertama adalah aturan semesta yang mematikan seluruh transisi dan animasi melalui selector universal seperti *. Umpan balik keadaan ikut hilang bersama gerak dekoratifnya, sehingga tombol tidak lagi menunjukkan keadaan aktif dan fokus. Perbaikannya, pisahkan gerak dekoratif dari umpan balik, lalu perlakukan keduanya berbeda di dalam blok reduce.

Kesalahan kedua adalah menganggap preferensi reduce berlaku untuk semua orang. Nilai bawaan media feature ini adalah no-preference, sehingga mayoritas pengguna tetap menerima gerak penuh, sedangkan jalur reduce hanya menjangkau yang memintanya. Perbaikannya, deklarasikan kedua jalur dengan seimbang dan uji keduanya melalui emulasi DevTools.

Kesalahan ketiga adalah hanya menyentuh properti animation dan lupa memperpendek durasi transisi. Transisi hover yang berdurasi 600 milidetik tetap terasa berat bagi pengguna yang meminta pengurangan gerak, meskipun tidak ada keyframe yang berjalan. Perbaikannya, blok reduce juga menyasar transition-duration, sebagaimana ditunjukkan contoh pada bagian pola penerapan.

Ringkasan#

Preferensi gerak terkurangi milik pengguna dan terbaca CSS melalui @media (prefers-reduced-motion: reduce), dengan nilai bawaan no-preference.
Pola yang disarankan menempatkan deklarasi gerak di dalam blok no-preference, sehingga animasi tidak berjalan bagi pengguna yang meminta pengurangan.
Umpan balik keadaan tetap diberikan dengan memperpendek durasi ke hampir nol, bukan dengan menghapus seluruh transisi.
Menghormati preferensi ini melayani pengguna dengan gangguan vestibular dan memperluas jangkauan antarmuka.

Referensi#

prefers-reduced-motion — MDN — Rujukan resmi media feature beserta contoh penerapannya.
CSS — MDN — Pintu masuk referensi CSS untuk media query dan properti terkait.
Learn CSS — web.dev — Kursus resmi yang membahas preferensi pengguna dalam konteks CSS menyeluruh.