Beberapa orang mengalami ketidaknyamanan akibat gerakan yang besar atau berulang. Fitur media preferensi-gerakan yang dikurangi memungkinkan halaman mengurangi animasi yang tidak penting ketika perangkat pengunjung memintanya.

@media (prefers-reduced-motion: reduce) {
  .card {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Kurangi gerak, bukan informasi

  • Jaga agar perubahan status tetap terlihat dengan gaya langsung atau pesan status singkat.
  • Hindari berkedip, paralaks, dan gerakan besar saat perubahan sederhana atau perubahan instan berhasil.
  • Jangan menghilangkan indikator fokus atau membuat kontrol lebih sulit digunakan dalam mode gerakan dikurangi.

Uji kedua pengaturan

Aktifkan pengurangan gerakan di sistem operasi atau alat browser dan coba setiap elemen interaktif. Konfirmasikan bahwa halaman tetap dapat dimengerti ketika animasi dihapus.

Default yang baik memberi pengunjung kendali tanpa mengharuskan mereka menemukan pengaturan khusus di dalam situs.