CSS Academy · Pelajaran

Animasi yang Aksesibel dengan prefers-reduced-motion

Hormati kebutuhan aksesibilitas dengan menonaktifkan atau mengurangi animasi bagi pengguna yang sensitif terhadap gerakan.

Pelajaran 4 dari 413 langkah

Animasi yang Aksesibel dengan prefers-reduced-motion adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengapa Mengurangi Gerakan

Beberapa pengguna mengalami gangguan vestibular, epilepsi, atau kondisi lain yang membuat animasi berbahaya. CSS menyediakan kueri media prefers-reduced-motion untuk mendeteksi dan menghormati preferensi sistem mereka.

Kueri Preferensi Gerakan yang Dikurangi

Nilai kueri:

no-preference — pengguna belum menyatakan preferensi
reduce — pengguna mengaktifkan pengurangan gerakan dalam pengaturan OS

<div class="box"></div>

Opsi Ekstrem (Tidak Disarankan)

Implementasi umum tetapi kasar yang mematikan semua animasi. Cara ini juga menghapus petunjuk gerakan yang berguna dan tidak menyebabkan kebingungan orientasi:

<div class="box"></div>

Lebih Baik: Gerakan Opsional

Pola yang lebih aman: tetapkan animasi hanya untuk pengguna tanpa preferensi gerakan, sehingga keadaan bawaan tetap tanpa gerakan:

<button class="btn">Button</button>
<div class="card">Card</div>

Menukar Jenis Animasi

Ganti gerakan yang menyebabkan kebingungan orientasi (translasi, penskalaan, rotasi) dengan alternatif yang aksesibel (opasitas, warna) bagi pengguna yang lebih menyukai gerakan yang dikurangi:

<div class="card demo-hover">Hover me</div>

Animasi Tak Terbatas

Animasi tak terbatas (pemutar, denyutan) sangat bermasalah. Sediakan cadangan statis:

<div class="spinner"></div>

Efek Paralaks

Pengguliran paralaks dapat menyebabkan mabuk gerak yang parah. Selalu nonaktifkan efek ini bagi pengguna yang lebih menyukai gerakan yang dikurangi:

<div class="parallax">Parallax section</div>

Akses JavaScript

Periksa preferensi dalam JavaScript saat menggunakan API Animasi Web atau pustaka pengguliran:

<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  const el = document.getElementById('rm-spinner');
  const status = document.getElementById('rm-status');
  if (!reducedMotion.matches) {
    el.classList.add('spin');
    status.textContent = 'Motion allowed — spinning';
  } else {
    status.textContent = 'Reduced motion — animation skipped';
  }
</script>

WCAG dan Gerakan

WCAG 2.3.3 (AAA) mewajibkan animasi yang dipicu oleh interaksi dapat dinonaktifkan. Menggunakan prefers-reduced-motion adalah pendekatan CSS yang disarankan untuk memenuhi kriteria ini.

Menguji Gerakan yang Dikurangi

Di tab Perenderan Chrome DevTools → aktifkan “Tiru CSS preferensi gerakan yang dikurangi: kurangi” untuk menguji tanpa mengubah pengaturan OS. Di macOS: Preferensi Sistem → Aksesibilitas → Kurangi Gerakan.

Dokumentasikan Tujuannya

Beri komentar pada animasi untuk menjelaskan apakah animasi tersebut fungsional atau sekadar dekoratif. Animasi fungsional (yang menunjukkan proses atau kemajuan) harus memiliki alternatif yang aksesibel; animasi dekoratif cukup dihapus.

Pemeriksaan Singkat

Pendekatan mana yang paling tepat untuk menangani preferensi gerakan yang dikurangi pada efek kartu terangkat saat diarahkan?

Jawab di pelajaran interaktif

Ringkasan

Gunakan prefers-reduced-motion: reduce untuk mendeteksi sensitivitas terhadap gerakan. Alih-alih mematikan semua animasi, sediakan keadaan bawaan tanpa gerakan dan aktifkan gerakan secara opsional di dalam kueri no-preference. Ganti animasi transformasi yang menyebabkan kebingungan orientasi dengan transisi opasitas atau warna bagi pengguna yang mengurangi gerakan. Uji dengan emulasi DevTools.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Animasi yang Aksesibel dengan prefers-reduced-motion” gratis?

Ya — teks lengkap “Animasi yang Aksesibel dengan prefers-reduced-motion” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Animasi yang Aksesibel dengan prefers-reduced-motion”?

Hormati kebutuhan aksesibilitas dengan menonaktifkan atau mengurangi animasi bagi pengguna yang sensitif terhadap gerakan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Animasi yang Aksesibel dengan prefers-reduced-motion” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Sintaks @keyframes dan Properti Animasi
Arah Animasi, Fill-Mode, dan Iterasi
Merangkai dan Mengurutkan Animasi
Animasi yang Aksesibel dengan prefers-reduced-motion

← Kembali ke CSS Academy