Reduced Motion

Bagi sebagian pengguna, gerakan layar yang besar atau berulang bukan sekadar mengganggu — gerakan itu menimbulkan pusing, mual, hingga ketidakseimbangan. Kondisi ini berhubungan dengan sistem vestibular, bagian telinga dalam yang menjaga keseimbangan tubuh: ketika mata melihat gerakan yang tidak ditubuhkan, sinyal yang diterima otak saling bertentangan. Sistem operasi menyediakan pengaturan “kurangi gerakan” untuk mereka, dan CSS membaca pengaturan itu melalui media query prefers-reduced-motion . Chapter ini menempatkan mekanisme tersebut dalam kerangka WCAG 2.3.3 dan menguraikan jenis gerak mana yang wajib dapat dihentikan.

WCAG 2.3.3 dan Jenis Gerak yang Berisiko #

Kriteria WCAG 2.3.3 Animation from Interactions (level AAA) menuntut: gerakan yang dipicu interaksi harus dapat dimatikan, tanpa menghilangkan isi maupun fungsinya. Meskipun levelnya AAA, penerapannya telah menjadi praktik standar industri — dan bagi pengguna dengan gangguan vestibular, penerapan itu adalah syarat agar halaman dapat dipakai sama sekali. Tiga kategori gerak yang paling perlu diperhatikan:

1. Gerakan besar pada area pandang: parallax yang menggeser latar, scroll-driven animation yang melompat antarbagian, dan transisi halaman penuh.
2. Gerakan berulang tanpa henti: spinner, korsel otomatis, elemen berdenyut, dan indikator dekoratif yang tidak pernah diam.
3. Perubahan skala ekstrem: kartu yang membesar dari nol hingga penuh, atau efek zoom pada galeri.

Umpan balik kecil tetap aman: crossfade opacity singkat, perubahan warna, atau pergeseran beberapa piksel. Prinsipnya, yang perlu dapat dihentikan adalah gerakan yang ditonton, bukan yang dirasakan sebagai umpan balik.

Pola CSS dan Batasannya #

Pola teknisnya telah kita susun pada dua chapter sebelumnya — dua pola pembungkusan animasi pada Chapter prefers-reduced-motion , dan pola lengkap termasuk trik durasi 0.01ms yang menjaga event transitionend tetap terpicu pada Chapter Motion Accessibility . Kerangka singkatnya:

.banner-melayang {
  animation: melayang 2s ease-in-out infinite;
}

@keyframes melayang {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* Gerak berulang berhenti bagi pengguna reduce */
@media (prefers-reduced-motion: reduce) {
  .banner-melayang {
    animation: none;
  }
}

Hasil di Browser:

Headless browser pengujian memakai preferensi bawaan (no-preference),
sehingga gaya dasar yang diperiksa harness: banner mencatat
animation-name "melayang" dengan duration "2s" dan iteration-count
"infinite"; indikator memuat mencatat animation-name "berputar",
iteration-count "infinite"; tombol mencatat transition-duration "0.15s".
Pada perangkat pengguna dengan preferensi reduce, blok media query di
stylesheet menghentikan kedua animasi berulang dan membuat transisi
tombol berjalan seketika.

Nilai animation-iteration-count: infinite pada dua probe di atas adalah sinyal praktis yang bisa kita percayakan saat audit: elemen yang beranimasi tanpa henti adalah kandidat pertama yang harus dapat dihentikan — baik dengan animation: none maupun dengan menggantinya pada keadaan diam dan beranimasi hanya sesaat.

Alternatif Statis yang Tetap Bermakna #

Pada sisi CSS, alternatif terbaik untuk gerak besar adalah menggantinya dengan transisi keadaan: alih-alih banner yang terus melayang, cukup perubahan warna atau bayangan saat keadaannya berubah — durasi 0.15s seperti pada tombol demo sudah memberi umpan balik tanpa gerakan berulang. Untuk indikator progres yang tak terhindarkan bergerak (spinner “sedang memuat”), pertimbangkan menggantinya dengan teks persentase pada reduce, karena teks diam sama informatifnya tanpa memutar layar.

Halaman yang menghormati preferensi gerak sekaligus lebih hemat daya: animasi yang berhenti mengurangi kerja komposit browser. Dengan demikian, preferensi aksesibilitas dan performa berjalan ke arah yang sama — poin yang kita sambungkan pada Chapter Animation Performance . Demo chapter ini (gerak-dikurangi.html) membawa banner beranimasi, indikator berputar, tombol bertransisi, dan lima pemeriksaan data-expected pada gaya dasarnya.