Menghormati prefers-reduced-motion
Deteksi kueri media prefers-reduced-motion dan nonaktifkan atau kurangi animasi bagi pengguna yang meminta gerakan lebih sedikit.
Menghormati prefers-reduced-motion adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Fitur Media prefers-reduced-motion
Beberapa pengguna mengalami mual, pusing, atau kejang akibat gerakan dalam antarmuka. Mereka mengatur OS untuk mengurangi gerakan. Fitur media prefers-reduced-motion mendeteksi preferensi ini agar CSS dapat meresponsnya.
Mendeteksi Pengurangan Gerakan dalam CSS
Bungkus animasi dalam kueri yang berlawanan: terapkan animasi secara normal, lalu timpa atau nonaktifkan animasi tersebut bagi pengguna yang lebih menyukai sedikit gerakan.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Prinsip “Dikurangi, Bukan Dihilangkan”
prefers-reduced-motion: reduce tidak berarti tanpa gerakan sama sekali. Beberapa gerakan menyampaikan perubahan keadaan antarmuka yang penting. Alih-alih menghapus animasi sepenuhnya, perlambat atau sederhanakan menjadi perpindahan silang.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}Pilihan Ekstrem: Menonaktifkan Semua Animasi
Pola yang umum adalah menonaktifkan semua transisi dan animasi secara global bagi pengguna yang mengurangi gerakan. Ini merupakan titik awal yang aman meskipun tidak setiap animasi disesuaikan secara khusus.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Mendeteksi Pengurangan Gerakan dalam JavaScript
Gunakan API matchMedia untuk mendeteksi preferensi tersebut dalam JavaScript — berguna untuk mengontrol animasi kanvas, gerakan yang digerakkan JavaScript, atau pemutaran otomatis video.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Perilaku Pengguliran dan Putar Otomatis
Nonaktifkan juga pengguliran halus bagi pengguna yang mengurangi gerakan: scroll-behavior: auto. Hentikan pemutaran otomatis video. Jangan membuat konten berkedip atau berstroboskop.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animasi dari Interaksi
WCAG 2.3.3 (Level AAA) mengharuskan agar gerakan yang dipicu oleh interaksi pengguna dapat dinonaktifkan. Dengan menghormati prefers-reduced-motion, Anda memenuhi kriteria ini dan meningkatkan aksesibilitas bagi pengguna dengan gangguan vestibular.
Menguji Pengurangan Gerakan
Di Chrome DevTools: buka panel perenderan (menu tiga titik → Alat lainnya → Perenderan), lalu aktifkan atau nonaktifkan 'Emulate CSS media feature prefers-reduced-motion'. Uji antarmuka Anda dalam mode ini sebelum merilisnya.
Praktik: Pola Animasi yang Aman
Animasi yang aman terhadap gerakan diterapkan secara bawaan dan dibungkus agar mudah dinonaktifkan secara global.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}Animasi Fokus Harus Tetap Ada
Indikator fokus (cincin yang menunjukkan elemen mana yang sedang mendapatkan fokus) seharusnya TIDAK dihapus, bahkan bagi pengguna yang mengurangi gerakan. Indikator ini penting untuk navigasi papan ketik dan biasanya tidak memicu gangguan vestibular.
Pustaka dan prefers-reduced-motion
Pustaka animasi populer (Framer Motion, GSAP, Anime.js) memiliki dukungan bawaan untuk pengurangan gerakan. Hook useReducedMotion() milik Framer Motion memudahkan penonaktifan animasi kompleks secara kondisional dalam React.
Pemeriksaan Singkat
Fitur media CSS mana yang mendeteksi preferensi pengguna untuk melihat lebih sedikit gerakan dalam antarmuka?
Rangkuman: prefers-reduced-motion
Beberapa pengguna memerlukan lebih sedikit gerakan demi kesehatan vestibular dan neurologis. Gunakan @media (prefers-reduced-motion: reduce) untuk menonaktifkan atau menyederhanakan animasi. Deteksi dalam JS dengan matchMedia. Pilihan ekstrem: atur animation/transition-duration ke 0.01ms secara global. WCAG 2.3.3 merekomendasikannya. Uji dengan panel perenderan DevTools.
Belajar HTML 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
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghormati prefers-reduced-motion” gratis?
Ya — teks lengkap “Menghormati 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 Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menghormati prefers-reduced-motion”?
Deteksi kueri media prefers-reduced-motion dan nonaktifkan atau kurangi animasi bagi pengguna yang meminta gerakan lebih sedikit. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 “Menghormati 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Properti Khusus CSS: mendeklarasikan dan memperbarui
- Transisi: properti, durasi, waktu
- Animasi @keyframes
- Menghormati prefers-reduced-motion